/*=== Google Fonts ===*/
@import url('https://fonts.googleapis.com/css?family=Cabin:400,500,600,700');
/*--------------------------------------------------------------
>> TABLE OF CONTENTS:
----------------------------------------------------------------
1. Normalize
2. Alignments
3. Clearings
4. Typography
5. Links
6. Transition
7. General
8. Preloader
9. ScrollUp
10. Site Header
11. Home Page
# Accordian
# Service
# Donate
# Cause
# Gallery
# Team
# Event
# Client
# Blog
# Footer
12. Blog Details
13. Responsive
--------------------------------------------------------------*/
/*--------------------------------------------------------------
1. Normalize
--------------------------------------------------------------*/
html {
font-family: sans-serif;
line-height: 1.15;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
figcaption,
figure,
main {
display: block;
}
figure {
margin: 1em 0;
}
hr {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
overflow: visible;
}
pre {
font-family: monospace, monospace;
font-size: 15px;
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
a:active,
a:hover {
outline-width: 0;
}
abbr[title] {
border-bottom: 1px #767676 dotted;
text-decoration: none;
}
b,
strong {
font-weight: inherit;
font-weight: bold;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 15px;
}
dfn,
cite,
em,
i {
font-style: italic;
}
mark,
ins {
background-color: #fbfb01;
color: #505050;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -4px;
}
sup {
top: -8px;
}
audio, canvas, progress, video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
img {
border-style: none;
}
svg:not(:root) {
overflow: hidden;
}
button,
input,
optgroup,
select,
textarea {
display: block;
font-size: 100%;
line-height: 25px;
margin: 0;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: none;
}
fieldset {
border: none;
margin: 0 5px;
padding: 0;
}
legend {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
progress {
display: inline-block;
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
details,
menu {
display: block;
}
summary {
display: list-item;
}
canvas {
display: inline-block;
}
template {
display: none;
}
[hidden] {
display: none;
}
/*--------------------------------------------------------------
2. Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.entry-footer:before,
.entry-footer:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after,
.comment-author:before,
.comment-author:after,
.widget-area:before,
.widget-area:after,
.widget:before,
.widget:after,
.comment-meta:before,
.comment-meta:after {
content: "";
display: table;
table-layout: fixed;
}
.clear:after,
.entry-content:after,
.entry-footer:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after,
.comment-author:after,
.widget-area:after,
.widget:after,
.comment-meta:after {
clear: both;
}
/*--------------------------------------------------------------
3. Typography
--------------------------------------------------------------*/
body {
color: #000000;
font-family: 'Cabin', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 24px;
}
button {
color: #505050;
font-size: 14px;
line-height: 24px;
}
input, select, textarea {
width: 100%;
margin-bottom: 30px;
padding: 5px 10px;
font-size: 13px;
border-color: #02a274;
border-width: 0px 0px 2px;
border-style: solid;
outline: none;
font-family: 'cabin', sans-serif;
}
textarea {
max-height: 120px;
}
input:focus, textarea:focus {
border-color: #025db9;
}
h1,
h2,
h3,
h4,
h3,
h5,
h6 {
clear: both;
color: #505050;
padding: 0;
margin: 0 0 10px 0;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 34px;
}
h3 {
font-size: 26px;
}
h4 {
font-size: 22px;
}
h5 {
font-size: 18px;
}
h6 {
font-size: 15px;
}
p {
font-family: 'Poppins','Cabin', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 1.55;
margin-bottom: 12px;
font-size: 15px;
color: #025db9;
}
.white p {
color: white; /* or whatever color you want */
}
ul {
margin: 0 0 15px 0;
padding-left: 15px;
list-style: square outside none;
}
ol {
padding-left: 15px;
margin-bottom: 15px;
}
li {
font-size: 15px;
}
dfn, cite, em, i {
font-style: italic;
}
blockquote {
margin: 0 15px;
}
address {
margin: 0 0 15px;
}
img {
border: 0;
max-width: 100%;
height: auto;
}
/*--------------------------------------------------------------
4. Links
--------------------------------------------------------------*/
a {
font-size: 15px;
color: #505050;
background-color: transparent;
}
a:hover,
a:focus,
a:active {
color: #FFC206;
text-decoration: none;
}
a:focus,
a:hover,
a:active {
outline: none;
}
/*--------------------------------------------------------------
5. Transition
--------------------------------------------------------------*/
a, input, select, textarea,
.t-btn, .portfolio-item a:before,
.member-social {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/*--------------------------------------------------------------
6. General
--------------------------------------------------------------*/
body,
html {
height: 100%;
width: 100%
}
.container {
padding-right: 30px;
padding-left: 30px;
}
.row {
margin-right: -30px;
margin-left: -30px;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
padding-right: 30px;
padding-left: 30px;
}
.flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.section {
padding: 80px 0 10px;
}
.black-bg {
background-color: #0C0C0C;
color: #fff;
}
.t-btn {
display: inline-block;
background-color: #025db9;
color: #fff;
font-weight: 400;
font-size: 14px;
padding: 12px 32px;
line-height: 20px;
outline: none;
border: none;
letter-spacing: 0.5px;
font-family: 'Cabin', sans-serif;
}
.t-btn.t-btn-small {
padding: 10px 22px;
font-size: 14px;
}
.t-btn.t-btn-ex-small {
padding: 6px 20px;
font-size: 12px;
}
.t-btn.t-btn-lagre {
padding: 17px 40px;
font-size: 17px;
}
.t-btn.t-btn-ex-lagre {
padding: 21px 46px;
font-size: 20px;
}
.t-btn:hover,
.t-btn:active,
.t-btn:focus {
background-color: #02a274;
color: #fff;
}
.p-l-r-0 {
padding-left: 0;
padding-right: 0;
}
/*--------------------------------------------------------------
7. Preloader
--------------------------------------------------------------*/
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #02a274;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
z-index: 99999;
}
#status {
width: 50px;
height: 30px;
position: fixed;
left: 50%;
top: 50%;
margin: -25px 0 0 -25px;
}
.spinner {
margin: 0px auto;
width: 50px;
height: 30px;
text-align: center;
font-size: 10px;
}
.spinner > div {
background-color: #FFC206;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4)
}
20% {
-webkit-transform: scaleY(1.0)
}
}
@keyframes stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
}
20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
/*--------------------------------------------------------------
8. ScrollUp
--------------------------------------------------------------*/
.scrollup {
position: fixed;
background-color: rgba(255, 194, 6, 0.6);
bottom: -60px;
right: 25px;
color: #fff;
padding: 5px;
height: 36px;
width: 36px;
display: flex;
justify-content: center;
align-items: center;
font-size: 17px;
cursor: pointer;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: 10;
}
.scrollup:hover {
background-color: #FFC206;
}
.scrollup:before {
content: "\f102";
font-family: 'FontAwesome';
}
.scrollup.scrollup-show {
bottom: 25px;
}
/*--------------------------------------------------------------
9. Site Header
--------------------------------------------------------------*/
.site-header {
/*width: 100vw;*/
position: fixed;
top: 0;
z-index: 100;
height: 80px;
background-color: rgba(0, 0, 0, 0.15);
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.header-wrap {
width: 90%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
height: 100%;
position: relative;
}
.header-wrap:before,
.header-wrap:after {
content: none;
}
.site-header.small-height {
background-color: #000;
height: 70px;
}
/*Site Branding*/
.site-header .custom-logo {
max-width: 160px;
max-height: 60px;
display: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.site-header.small-height .custom-logo {
max-width: 160px;
max-height: 60px;
display: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.custom-logo-link {
display: inline-block;
}
.site-title {
line-height: 30px;
display: inline-block;
}
.site-title a {
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 25px;
letter-spacing: 1px;
font-family: 'Roboto', sans-serif;
display: inherit;
line-height: inherit;
}
/*End Site Branding*/
/*Navigation*/
.primary-nav {
display: flex;
align-items: center;
flex-wrap: wrap;
height: 100%;
}
.primary-nav ul {
display: flex;
list-style: none;
flex-wrap: wrap;
align-items: center;
padding-left: 0;
margin-bottom: 0;
}
.primary-nav .menu-item {
position: relative;
margin-right: 33px;
}
.primary-nav .menu-item:last-child {
margin-right: 0px;
}
.nav > li > a:focus, .nav > li > a:hover {
background-color: transparent;
}
.primary-nav .menu-item > a {
font-size: 14px;
letter-spacing: 0.25px;
text-transform: uppercase;
font-weight: 400;
padding: 0;
min-height: 100px;
display: flex;
align-items: center;
font-family: 'Cabin', sans-serif;
}
.site-header .primary-nav .menu-item > a {
min-height: 80px;
}
.site-header.small-height .primary-nav .menu-item > a {
min-height: 70px;
}
.primary-nav-list .menu-item > a {
color: #fff;
}
.primary-nav-list .active > a,
.primary-nav-list .menu-item > a:hover {
color: #FFC206;
background-color: transparent;
}
.primary-nav-list .current-menu-ancestor .current-menu-ancestor.current-menu-parent > a,
.primary-nav-list .current-menu-ancestor.current-menu-parent .current-menu-item > a {
background: rgba(0, 0, 0, 0.3);
border-color: rgba(0, 0, 0, 0.3);
}
.site-header .primary-nav .menu-item-has-children > ul {
width: 200px;
padding-left: 0;
background-color: #025db9;
position: absolute;
top: 80px;
display: none !important;
z-index: 10;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.site-header .primary-nav .menu-item-has-children > ul ul {
top: 1px;
border-left: 1px solid rgba(142, 141, 141, 0.2);
}
.site-header.small-height .primary-nav .menu-item-has-children > ul {
top: 70px;
}
.site-header.small-height .primary-nav .menu-item-has-children > ul ul {
top: 1px;
}
.primary-nav .menu-item:hover > ul {
display: block !important;
}
.primary-nav .menu-item-has-children > ul > li {
padding: 0;
margin: 0;
position: relative;
line-height: 16px;
}
.primary-nav .menu-item-has-children > ul > li a {
height: initial;
display: block;
padding: 11px 15px;
background: transparent;
font-size: 11px;
box-shadow: none;
margin-top: -1px;
}
.site-header .primary-nav .menu-item-has-children > ul > li a,
.site-header.small-height .primary-nav .menu-item-has-children > ul > li a {
min-height: 30px;
}
.primary-nav .menu-item-has-children > ul > li:not(:first-child) a {
border-top: 1px solid rgba(142, 141, 141, 0.2);
}
.primary-nav .menu-item-has-children > ul > li:not(:last-child) a {
border-bottom: 1px solid rgba(142, 141, 141, 0.2);
}
.primary-nav .menu-item-has-children > ul > li a:hover {
background: rgba(0, 0, 0, 0.3);
border-color: rgba(0, 0, 0, 0.3);
}
.primary-nav .menu-item-has-children > ul > li ul {
position: absolute;
left: 100%;
right: 100%;
top: 1px;
display: none;
}
.primary-nav .menu-item-has-children > ul > li:hover ul {
display: block;
}
/*Mobile Menu Button*/
.m-menu-btn {
position: relative;
display: inline-block;
width: 30px;
height: 27px;
margin: 15px 0px 15px 25px;
cursor: pointer;
display: none;
}
.m-menu-btn span {
margin: 0 auto;
position: relative;
top: 12px;
-webkit-transition-duration: 0s;
transition-duration: 0s;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.m-menu-btn span:before,
.m-menu-btn span:after {
position: absolute;
content: '';
}
.m-menu-btn span,
.m-menu-btn span:before,
.m-menu-btn span:after {
width: 25px;
height: 2px;
background-color: #fff;
display: block;
}
.m-menu-btn span:before {
margin-top: -8px;
-webkit-transition-property: margin, -webkit-transform;
transition-property: margin, transform;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-delay: 0.2s, 0s;
transition-delay: 0.2s, 0s;
}
.m-menu-btn span:after {
margin-top: 8px;
-webkit-transition-property: margin, -webkit-transform;
transition-property: margin, transform;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-delay: 0.2s, 0s;
transition-delay: 0.2s, 0s;
}
.m-menu-btn-ext span {
background-color: rgba(0,0,0,0.0);
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.m-menu-btn-ext span:before {
margin-top: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition-delay: 0s, 0.2s;
transition-delay: 0s, 0.2s;
}
.m-menu-btn-ext span:after {
margin-top: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition-delay: 0s, 0.2s;
transition-delay: 0s, 0.2s;
}
.m-dropdown {
display: none;
}
/*End Mobile Menu Button*/
.primary-nav .primary-nav-list {
display: flex !important;
}
/*--------------------------------------------------------------
10. Home Page
--------------------------------------------------------------*/
.hero {
min-height: 100vh;
position: relative;
margin: 0;
}
.hero-slider {
position: absolute;
left: 0;
top: 0;
height: 100%;
z-index: -1;
}
.hero-slider.owl-carousel .owl-stage-outer, .hero-slider.owl-carousel .owl-stage-outer .owl-stage, .hero-slider.owl-carousel .owl-stage-outer .owl-stage > div {
height: 100%;
}
.hero-slider.owl-carousel img {
width: 100%;
height: 100%;
object-fit: cover;
}
.single-slide {
background-color: transparent;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
width: 100%;
padding: 150px 0 80px;
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.youtube-bg {
background-color: #000;
background-image: url(../img/youtube-bg-img.jpg);
}
.single-slide .container:before,
.single-slide .container:after {
content: none
}
.parallax {
background-position: 50% 0;
background-attachment: fixed;
}
.single-slide h1 {
color: #fff;
font-weight: 800;
letter-spacing: 1px;
font-size: 48px;
padding-bottom: 40px;
margin-bottom: 45px;
position: relative;
}
.single-slide h1 span {
color: #FFC206;
}
.single-slide h1:before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 190px;
height: 1px;
/*background-color: #fff;*/
}
.single-slide h3 {
color: #fff;
font-size: 20px;
letter-spacing: 2px;
font-weight: 400;
font-family: 'cabin', sans-serif;
margin-bottom: 20px;
}
.single-slide h5 {
color: #fff;
font-family: 'roboto', sans-serif;
font-weight: 400;
font-size: 14px;
margin-bottom: 60px;
}
.hero-btn-group {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.hero-btn-group > a {
margin: 7px 15px;
min-width: 170px;
text-align: center;
}
.t-btn.hero-btn-1 {
background-color: #fff;
color: #000;
border: 1px solid #fff;
}
.t-btn.hero-btn-2 {
border: 1px solid #FFC206;
background-color: transparent;
}
.t-btn.hero-btn-1:hover,
.t-btn.hero-btn-2:hover {
background-color: #FFC206;
border-color: #FFC206;
color: #fff;
}
.single-feature {
margin-bottom: 30px;
}
.single-feature i {
color: #FFC206;
display: inline-block;
font-size: 54px;
margin-bottom: 5px;
}
.single-feature p {
min-height: 84px;
}
.single-feature h3 {
color: #fff;
font-size: 18px;
font-weight: 800;
margin-bottom: 20px;
letter-spacing: 0.5px;
}
.single-feature p {
color: #fff;
font-weight: 400;
font-size: 14px;
line-height: 21px;
padding: 0 1%;
font-size: 14px;
}
.single-feature a {
font-weight: 500;
font-size: 15px;
/* --- New styles to match the image --- */
/* Sets the text color to blue and the background to a whitish-gray */
color: #025db9;
background-color: #f0f2f5;
/* Creates the rounded pill shape */
border-radius: 24px;
/* Adds space inside the button */
padding: 1px 8px;
/* Removes the default link underline */
text-decoration: none;
/* Allows padding to be applied correctly */
display: inline-block;
}
.single-feature a:hover {
color: #ca9b0d;
}
.single-feature a i {
font-size: 13px;
margin-bottom: 0;
}
.section-header {
display: flex;
align-items: center;
margin-bottom: 40px;
}
.section-header h2 {
flex: none;
padding-right: 60px;
margin-right: 60px;
text-transform: uppercase;
font-size: 24px;
font-weight: 800;
color: #025db9;
margin-bottom: 0;
position: relative;
/*letter-spacing: 2px;*/
}
.section-header.white h2 {
color: #fff;
}
.section-header h2:before {
content: '';
height: 80%;
width: 2px;
background-color: #025db9;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.section-header p {
margin: 0;
color: #025db9;
font-size: 15px;
line-height: 21px;
font-weight: 400;
letter-spacing: 0.75px;
/*max-width: 60%;*/
}
/*=== Accordian ===*/
.accordian-wrapper {
}
.single-accordian {
background-color: transparent;
}
.accordian-head {
cursor: pointer;
margin: 0;
font-size: 12px;
color: #fff;
background-color: #0C0C0C;
text-transform: capitalize;
font-weight: 700;
padding: 14px 25px;
position: relative;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.accordian-head.active {
/*background-color: #FFC206;*/
background-color: #025db9;
color: #fff;
}
.accordian-head i {
color: #404040;
margin-right: 18px;
}
.accordian-head.active i {
color: #fff;
}
.single-accordian .accordian-body {
color: #025db9;
line-height: 22px;
font-size: 14px;
padding: 15px 20px 10px;
}
.accordian-toggle {
display: inline-block;
height: 42px; /* bigger circle */
width: 42px;
background-color: transparent;
border-radius: 50%;
border: 2px solid #025db9; /* blue circle */
position: absolute;
right: 30px;
top: 50%; /* center vertically */
transform: translateY(-50%); /* adjust for exact centering */
transition: all 0.3s ease;
}
.accordian-toggle:before {
content: '';
position: absolute;
height: 2px;
width: 12px; /* match circle size */
background-color: #025db9;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /* center horizontally + vertically */
transition: all 0.3s ease;
}
.accordian-toggle:after {
content: '';
position: absolute;
height: 12px; /* match circle size */
width: 2px;
background-color: #025db9;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /* center inside circle */
transition: all 0.3s ease;
}
.active .accordian-toggle {
background-color: transparent;
}
.active .accordian-toggle:before {
background-color: #fff;
}
.active .accordian-toggle:after {
opacity: 0;
}
/*Emd Accordian*/
.video-section {
margin-bottom: 30px;
padding-left: 15px;
}
.about-img {
margin-bottom: 30px;
}
.about-img img {
width: 100%;
}
/*=== Service ===*/
.service.section {
padding-bottom: 30px;
}
.service .single-feature {
margin-bottom: 50px;
}
/*=== Donate ===*/
.donate {
/* background-image: url(../img/down-bg.jpg); */
background-position: center center;
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.donate h2 {
font-size: 18px;
font-weight: 800;
color: #fff;
margin-bottom: 25px;
}
.donate p {
font-size: 15px;
line-height: 21px;
color: #025db9;
/*margin-bottom: 45px;*/
padding: 0 5%;
max-width: 70%;
margin-left: auto;
margin-right: auto;
}
.donate-btn {
background-color: #000;
font-size: 14px;
padding: 13px 40px;
margin-bottom: 30px;
}
.donate-btn:hover {
background-color: #fff;
color: #000;
}
/*=== Cause ===*/
.section.cause {
padding-bottom: 0;
}
.cause-thumb {
width: 100%;
margin-bottom: 30px;
}
.single-cause h3 {
font-size: 18px;
font-weight: 700;
color: #FEC100;
color: #025db9;
margin-bottom: 15px;
}
.single-cause p {
font-size: 14px;
font-weight: 400;
color: #000;
line-height: 22px;
}
.donate-status {
margin-bottom: 15px;
}
.donate-status .status {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.donate-status .status > span {
font-family: 'Roboto', sans-serif;
font-weight: 600;
font-size: 14px;
display: inline-block;
margin: 4px 0;
}
.status-bar {
display: block;
height: 7px;
background-color: #DBDBDB;
position: relative;
overflow: hidden;
}
.status-bar > div {
position: absolute;
height: 100%;
left: 0;
top: 0;
background-color: #FEC100;
}
/*=== Gallery ===*/
.portfolio {
margin-left: -15px;
margin-right: -15px;
margin-bottom: 0px;
}
.gutter-less.portfolio {
margin-left: 0px;
margin-right: 0px;
margin-bottom: 30px;
}
.grid-sizer,
.portfolio-item {
padding: 0 15px 30px;
width: 33.3333333%;
display: flex;
display: flex;
justify-content: center;
}
.gutter-less .portfolio-item {
padding: 0;
}
.portfolio-item a {
display: block;
width: 100%;
position: relative;
}
.portfolio-item a:before {
content: "\f002";
font-family: 'FontAwesome';
position: absolute;
background-color: rgba(255, 194, 6, 0.5);
height: 100%;
width: 100%;
color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
opacity: 0;
}
.portfolio-item a:hover:before {
opacity: 1;
}
.portfolio-item img {
width: 100%;
}
/*Popup*/
.image-source-link {
color: #98C3D1;
}
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
opacity: 0;
-webkit-backface-visibility: hidden;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {
opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
opacity: 0;
}
/*Fun Factor*/
.fun-factor {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
min-height: 325px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.single-factor {
margin-bottom: 30px;
}
.single-factor i {
font-size: 30px;
color: #FEC100;
display: block;
font-weight: 400;
margin-bottom: 13px;
}
.single-factor h3 {
font-weight: 600;
color: #FFFFFF;
text-align: center;
font-family: 'cabin', sans-serif;
font-size: 18px;
}
.single-factor h2 {
font-weight: 700;
color: #FFFFFF;
text-align: center;
font-size: 18px;
margin-bottom: 0;
letter-spacing: 0.25px;
}
/*=== Team ===*/
.team.section {
padding-bottom: 0;
}
.team-member {
margin-bottom: 30px;
}
.team-member .member-thumb {
position: relative;
margin-bottom: 30px;
}
.team-member .member-thumb img {
max-height: 233px;
width: 100%;
}
.team-member .member-thumb .member-social {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
opacity: 0;
background-color: rgba(255, 194, 6, 0.75);
}
.team-member:hover .member-thumb .member-social {
opacity: 1;
}
.team-member .member-thumb .member-social a {
background-color: #292001;
color: #fff;
height: 30px;
width: 30px;
display: flex;
justify-content: center;
align-items: center;
margin: 3px;
font-size: 14px;
}
.team-member .member-thumb .member-social a:hover {
background-color: #fff;
color: #292001;
}
.team-member .member-name {
font-size: 16px;
color: #FEC100;
font-weight: 800;
letter-spacing: 0.5px;
margin-bottom: 5px;
}
.team-member .designation {
display: block;
font-weight: 400;
color: #000000;
font-family: cabin, sans-serif;
font-size: 14px;
line-height: 22px;
}
/*=== Event ===*/
.single-event {
padding: 20px;
box-shadow: 2px 2px 12px 3px rgba(0,0,0,0.15);
display: flex;
margin-bottom: 30px;
transition: all 0.3s ease;
}
.single-event:hover {
box-shadow: 4px 4px 15px 5px rgba(0,0,0,0.15);
}
.event-thumb {
width: 340px;
min-height: 210px;
max-height: 742px;
flex: none;
margin-right: 20px;
}
.event-thumb img {
object-fit: cover;
height: 100%;
}
.event-details h3 {
font-size: 18px;
color: #02a274;
font-weight: 700;
margin-top: 4px;
margin-bottom: 18px;
}
.event-details p {
font-size: 14px;
line-height: 21px;
color: #000;
margin-bottom: 15px;
}
.event-location {
margin-bottom: 20px;
}
.event-location i {
display: inline-block;
color: #000;
margin-right: 5px;
}
.event-location span {
display: inline-block;
position: relative;
}
.event-location span:not(:last-child) {
padding-right: 15px;
margin-right: 15px;
}
.event-location span:first-child:before {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 14px;
width: 1px;
background-color: #000;
}
.event-btn-group a {
margin-right: 10px;
margin-bottom: 5px;
}
.t-btn.t-btn-ex-small.event-btn-1 {
background-color: #000000;
color: #fff;
}
.t-btn.t-btn-ex-small.event-btn-1:hover {
background-color: #FFC206;
color: #fff;
}
/*=== Client ===*/
.client {
/* background-image: url(../img/client-bg.jpg); */
background-position: center center;
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
min-height: 300px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.client-logo {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
.client-logo a {
margin-bottom: 30px;
border: 2px solid transparent;
transition: all 0.3s ease;
}
.client-logo a:hover {
margin-bottom: 30px;
transform: scale(0.95);
border: 2px solid rgba(255, 194, 6, 0.7);
}
/*=== Blog ===*/
.section.blog {
padding-bottom: 0;
}
.post-thumbnail {
display: block;
margin-bottom: 20px;
}
.post-thumbnail img {
width: 100%;
}
.post-details-wrap {
padding-left: 85px;
position: relative;
min-height: 74px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
margin-bottom: 15px;
}
.entry-title {
font-size: 18px;
color: #FEC100;
font-weight: 700;
margin-bottom: 8px;
}
.entry-title a {
font-family: inherit;
color: inherit;
font-weight: inherit;
font-size: inherit;
line-height: inherit;
}
.byline .author a {
font-weight: 400;
color: #7F7F7F;
font-family: 'cabin', sans-serif;
}
.home-blog .byline .author a i {
margin-right: 4px;
color: #191E50;
}
.byline .author a:hover {
color: #FFC206;
}
.home-blog .posted-on {
position: absolute;
left: 0;
top: 0;
font-family: 'roboto', sans-serif;
font-weight: 400;
background-color: #000;
color: #fff;
width: 65px;
height: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 5px;
font-size: 14px;
}
.home-blog .posted-on span {
position: relative;
width: 100%;
padding-bottom: 4px;
margin-bottom: 4px;
font-weight: 700;
font-size: 16px;
}
.home-blog .posted-on span:before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
height: 1px;
width: 55%;
background-color: #fff;
}
.entry-content p {
font-size: 14px;
color: #000;
line-height: 21px;
margin-bottom: 25px;
}
/*Contact*/
.t-btn.submit-btn {
width: 100%;
max-width: 50%;
margin-top: 35px;
margin-bottom: 30px;
}
/*=== Footer ===*/
.copy-right {
color: #fff;
font-size: 13px;
font-weight: 400;
margin-bottom: 18px;
}
.social-btn {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-bottom: 20px;
}
.social-btn a {
height: 30px;
width: 30px;
border: 1px solid #fff;
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
color: #fff;
font-size: 12px;
}
.social-btn a:hover {
border-color: #FFC206;
background-color: #FFC206;
}
/*--------------------------------------------------------------
12. Blog Details
--------------------------------------------------------------*/
.other-hero {
background-color: #000;
background-image: url(../img/client-bg.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
min-height: 290px;
width: 100%;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.other-hero-text {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 80px;
}
.other-hero-text:before,
.other-hero-text:after {
display: none;
}
.other-hero-text h1 {
margin: 0;
text-transform: capitalize;
color: #fff;
font-weight: 700;
font-size: 28px;
letter-spacing: 0.5px;
line-height: 28px;
}
.breadcrumb {
margin: 0;
background-color: transparent;
padding: 0;
border-radius: 0;
line-height: 30px;
}
.breadcrumb li {
color: #fff;
font-size: 14px;
}
.breadcrumb li a {
color: inherit;
font-size: inherit;
}
.breadcrumb li a:hover {
color: #FFC206;
}
.Buildm-post, .post-details {
margin-bottom: 40px;
}
.Buildm-post .post-details-wrap, .post-details .post-details-wrap {
padding: 0;
position: relative;
margin-bottom: 10px;
}
.Buildm-post .byline, .post-details .byline {
margin-bottom: 10px;
}
.post-details .byline > span {
margin-right: 25px;
}
.Buildm-post span, .Buildm-post span a, .post-details span, .post-details span a {
color: #7F7F7F;
font-size: 15px;
}
.Buildm-post span a:hover, .post-details span a:hover {
color: #FEC100;
}
.Buildm-post span i, .post-details span i {
margin-right: 6px;
}
.Buildm-post .entry-title, .post-details .entry-title {
font-size: 24px;
color: #FEC100;
font-weight: 700;
margin-bottom: 0;
text-transform: uppercase;
}
.Buildm-post .entry-content, .post-details .entry-content {
color: #000;
font-size: 15px;
}
.Buildm-post .entry-content p, .post-details .entry-content p {
margin-bottom: 15px;
color: inherit;
line-height: 23px;
}
.social-btn.post-social-btn {
justify-content: flex-start;
margin-top: 30px;
margin-bottom: 5px;
}
.post-social-btn.social-btn a {
border: 1px solid #000;
margin: 3px;
color: #000;
}
.post-social-btn.social-btn a:hover {
color: #fff;
border-color: #FFC206;
background-color: #FFC206;
}
/*Comments*/
.comments-title, .comment-reply-title {
font-size: 18px;
text-transform: uppercase;
color: #000;
font-weight: 600;
margin-bottom: 30px;
}
.comment-list-outer, .comment-respond {
}
.comment-body {
position: relative;
margin-left: 120px;
margin-bottom: 30px;
min-height: 90px;
}
.children .comment-body {
min-height: 70px;
}
.comment-meta {
display: flex;
flex-wrap: wrap;
}
.comments-area ol {
list-style: none;
padding-left: 0;
}
.comments-area .children {
padding-left: 45px;
}
.comments-area .children .children {
padding-left: 35px;
}
.comment-author .avatar {
height: 90px;
width: 90px;
position: absolute;
top: 0;
left: -120px;
}
.comment-author {
line-height: 20px;
margin-bottom: 6px;
margin-right: 30px;
}
.comment-author .nm {
font-weight: 700;
color: #000;
font-size: 15px;
font-family: 'Roboto', sans-serif;
}
.comment-author .nm:hover {
color: #FFC206;
}
.comment-metadata {
line-height: 22px;
}
.comment-metadata a {
color: #7F7F7F;
font-weight: 400;
font-size: 14px;
}
.comment-metadata a:hover {
color: #FFC206;
}
.comment-content {
line-height: 22px;
color: #000;
font-size: 14px;
}
.comment-content p {
line-height: inherit;
color: inherit;
font-size: inherit;
}
.comment-reply-link {
font-size: 14px;
color: #FFC206;
position: relative;
}
.comment-reply-link:hover,
.comment-reply-link:focus {
color: #000;
}
.comment-reply-link:before {
content: "\f112";
font-family: 'FontAwesome';
margin-right: 4px;
}
.children .comment-body {
margin-left: 100px;
}
.children .comment-author .avatar {
height: 70px;
width: 70px;
left: -100px;
}
.comment-respond {
display: block;
width: 100%;
margin-top: 70px;
padding-bottom: 0px;
margin-bottom: 30px;
}
.comment-form {
display: flex;
flex-wrap: wrap;
}
.comment-form-author,
.comment-form-email,
.comment-form-url {
width: 33.3333%;
}
.comment-form-comment {
width: 100%;
}
.comment-form-author {
padding-right: 10px;
}
.comment-form-url {
padding-left: 10px;
}
.form-submit {
margin-bottom: 0;
}
.comment-form p {
margin: 0;
}
.comment-form textarea,
.comment-form input {
border: 1px solid #cacaca;
padding: 10px;
width: 100%;
background-color: transparent;
}
.comment-form textarea:focus,
.comment-form input:focus {
border-color: #FFC206;
}
.post-navigation {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.post-navigation > div {
display: inline-block;
}
.nav-previous a:before {
content: "\f100";
font-family: 'FontAwesome';
margin-right: 4px;
}
.nav-next a:after {
content: "\f101";
font-family: 'FontAwesome';
margin-left: 4px;
}
.nav-all-post {
min-width: 120px;
text-align: center;
margin: 0 25px;
}
/*--------------------------------------------------------------
13. Responsive
--------------------------------------------------------------*/
@media screen and (max-width: 991px) and (min-width: 768px) {
.container {
padding-right: 15px;
padding-left: 15px;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
padding-right: 15px;
padding-left: 15px;
}
}
/*== Start Site Header ==*/
@media screen and (max-width: 1023px) and (min-width: 1001px) {
.site-header .primary-nav .menu-item-has-children:last-child > ul {
right: 0px;
}
}
@media screen and (max-width: 1023px) {
/*== Home page Header ==*/
.site-header > div {
width: 100%;
padding: 0;
}
.site-branding {
margin-left: 30px;
}
.m-menu-btn {
margin-right: 30px;
}
.m-menu-btn {
display: block;
}
.primary-nav-list {
position: absolute;
top: 80px;
width: 100%;
left: 0;
display: none;
background: #025db9;
max-height: 295px;
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 5px;
border-bottom-left-radius: 24px;
}
.small-height .primary-nav-list {
top: 70px;
margin: 0;
}
.m-menu ul {
list-style: none;
}
.m-menu ul .menu-item a {
display: block;
padding: 6px 15px;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 1px;
}
.m-menu ul .menu-item ul li a {
font-size: 11px;
}
.m-menu ul .menu-item a:hover {
background-color: #2b2b2b;
}
.m-dropdown {
display: inline-block;
position: absolute;
top: 9px;
right: 16px;
color: rgba(255, 255, 255, 0.8);
font-size: 10px;
line-height: 18px;
height: 20px;
width: 20px;
text-align: center;
z-index: 11;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 50%;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.m-dropdown:hover {
color: #fff;
border-bottom: 1px solid #fff;
}
.m-menu ul .menu-item ul {
display: none;
padding-left: 10px;
}
.m-menu ul > .menu-item {
position: relative;
}
.menu-item.menu-item-has-children > a:after {
display: none;
}
}
/*== End Site Header ==*/
@media screen and (max-width: 767px) {
.section {
padding: 50px 0 20px;
}
.section-header {
flex-wrap: wrap;
}
.section-header {
text-align: center;
max-width: 90%;
margin-left: auto;
margin-right: auto;
}
.section-header h2 {
margin-bottom: 10px;
margin-right: 0;
padding-right: 0;
width: 100%;
}
.section-header h2:before {
display: none;
}
.section-header {
margin-bottom: 35px;
}
.service.section {
padding-bottom: 15px;
}
.service .single-feature {
margin-bottom: 35px;
}
.single-cause {
margin-bottom: 40px;
max-width: 390px;
}
.grid-sizer, .portfolio-item {
width: 50%;
}
.team-member {
max-width: 240px;
}
.home-blog .post {
max-width: 390px;
}
.single-feature {
max-width: 390px;
}
.cause .row > div:last-child .single-cause {
margin-bottom: 0px;
}
.section.event {
padding-top: 20px;
}
.team-member {
margin-bottom: 30px;
}
.home-blog .row > div:not(:last-child) > .post {
margin-bottom: 30px;
}
.other-hero-text {
width: 100%;
}
.section-header p {
max-width: 100%;
}
.donate p {
max-width: 100%;
}
}
@media screen and (max-width: 650px) {
.single-slide h1 {
letter-spacing: 0.5px;
font-size: 35px;
padding-bottom: 25px;
margin-bottom: 30px;
}
.section-header h2 {
font-size: 26px;
}
.hero-btn-group > a {
min-width: 140px;
}
.t-btn {
font-size: 13px;
padding: 10px 20px;
}
.t-btn.t-btn-ex-small {
padding: 6px 15px;
font-size: 11px;
}
.site-title a {
font-size: 22px;
letter-spacing: 0.7px;
}
.parallax {
background-position: 50% 0 !important;
}
.comment-form p {
width: 100%;
}
.comment-form-author {
padding-right: 0;
}
.comment-form-url {
padding-left: 0;
}
.other-hero {
min-height: 260px;
}
.other-hero-text {
justify-content: center;
flex-direction: column;
align-items: center;
margin-top: 70px;
}
.other-hero-text h1 {
margin-bottom: 7px;
}
}
@media screen and (max-width: 550px) {
.container {
padding-right: 15px;
padding-left: 15px;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
padding-right: 15px;
padding-left: 15px;
}
.t-btn.submit-btn {
max-width: 70%;
}
.single-slide h3 {
font-size: 18px;
letter-spacing: 1px;
margin-bottom: 15px;
}
.single-slide h5 {
margin-bottom: 40px;
}
.single-event {
flex-wrap: wrap;
}
.event-thumb {
width: 100%;
min-height: auto;
margin-right: 0;
margin-bottom: 22px;
}
.event-details h3 {
margin-bottom: 15px;
}
.event-thumb img {
width: 100%;
}
.section-header {
max-width: 100%;
}
.site-branding {
margin-left: 15px;
}
.m-menu-btn {
margin-right: 15px;
}
}
@media screen and (max-width: 450px) {
.grid-sizer, .portfolio-item {
width: 100%;
}
}
/* Scoped styles: only affect elements inside .row2 */
.row2 {
display: flex; /* works with or without Bootstrap present */
align-items: stretch;
gap: 16px; /* optional spacing */
}
.row2 .col2 {
flex: 1 1 0;
min-width: 0;
}
/* Bottom-align content in the right column */
.row2 .col2-text {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 16px; /* optional */
}
/* Responsive video */
.row2 .video2 iframe {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
border: 0;
border-radius: 25px;
}
.col2-text h2 {
flex: none;
padding-right: 60px;
margin-right: 60px;
text-transform: uppercase;
font-size: 24px;
font-weight: 800;
color: #025db9;
margin-bottom: 0;
position: relative;
/*letter-spacing: 2px;*/
}
.col2-text p {
color: #025db9;
}
/* Stack on small screens */
@media (max-width: 992px) {
.row2 {
flex-direction: column;
}
}
h2 {
font-family: 'Montserrat', sans-serif;
}
/* CUSTOM */
/*
|--------------------------------------------------------------------------|
| Place your custom styles here |
|--------------------------------------------------------------------------|
*/
/*.black-bg {
background-color: #02a274;
color: #fff;
}*/
.site-header.small-height {
background-color: #02a274;
height: 70px;
}
.accordian-head {
cursor: pointer;
margin: 0;
font-size: 14px;
color: #025db9;
background-color: white;
text-transform: capitalize;
font-weight: 700;
padding: 0 25px; /* Remove vertical padding */
position: relative;
border: 2px solid #025db9;
border-radius: 26px;
height: 90px;
display: flex;
align-items: center; /* Vertically center */
justify-content: flex-start; /* Align text to the left */
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.background-overlay {
/*background: rgba(0,0,0,0.35);*/
}
.donate-btn {
background-color: #025db9;
}
.donate-btn:hover {
background-color: #025db9;
color: #fff;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background-color: rgba(0, 0, 0, 0.3);*/ /* Adjust the opacity as needed */
z-index: 0; /* Set the z-index to be lower than the container */
}
.section-header-inverted h2 {
flex: none;
padding-right: 0px;
margin-right: 0px;
padding-left: 60px;
margin-left: 60px;
text-transform: uppercase;
font-size: 32px;
font-weight: 800;
color: #000;
margin-bottom: 0;
position: relative;
letter-spacing: 2px;
}
.section-header-inverted h2:before {
content: '';
height: 80%;
width: 2px;
background-color: #FFC206;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.post-thumbnail {
height: 293px;
}
.post-thumbnail img {
height: 293px;
object-fit: cover !important;
}
.custom-hero-right {
position: absolute;
right: 10%;
top: 40%;
text-align: center;
z-index: 2;
}
.hero-logo-repeat {
width: 420px; /* adjust as needed */
margin-bottom: 15px;
}
.hero-tagline {
font-size: 2.5rem;
color: #025db9; /* blue */
font-weight: bold;
padding-left: 250px;
}
.waaier {
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding: 3rem 1rem;
background: linear-gradient(to right, #ffffff, #f6fdfc);
}
.waaier-track {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
scroll-behavior: smooth;
padding-bottom: 1rem;
justify-content: center;
}
.waaier-card {
flex: 0 0 85%;
max-width: 350px;
background: white;
border-radius: 20px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
scroll-snap-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
overflow: hidden;
}
.waaier-card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.waaier-info {
padding: 1.5rem 1.2rem;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.waaier-info h3 {
/*font-size: 1.3rem;*/
color: #02a274;
margin-bottom: 0.8rem;
font-weight: bold;
}
.waaier-info p {
/*font-size: 0.95rem;*/
color: #444;
margin-bottom: 1.2rem;
line-height: 1.5;
}
.waaier-btn {
align-self: start;
background: #025db9;
color: white;
padding: 10px 18px;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
/*font-size: 0.85rem;*/
transition: background 0.3s ease;
}
.waaier-btn:hover {
background: #014b8a;
}
/* Focus effect */
.waaier-card:not(:hover) {
opacity: 0.85;
transform: scale(0.95);
}
/* Hide scrollbars */
.waaier-track::-webkit-scrollbar {
display: none;
}
/* Responsive: Stack cards vertically on small screens */
@media (max-width: 768px) {
.waaier-track {
flex-direction: column;
scroll-snap-type: none;
gap: 2rem;
}
.waaier-card {
flex: 1 1 auto;
max-width: 100%;
scroll-snap-align: none;
}
.waaier {
overflow-x: hidden;
padding: 2rem 1rem;
}
}
/* Contact section */
.contact.section {
/*background: #f6fdfc;*/
padding: 60px 20px;
border-radius: 20px;
}
/* Header styles */
.contact .section-header h2 {
/*font-size: 2.2rem;*/
color: #025db9;
margin-bottom: 20px;
text-transform: uppercase;
font-weight: 800;
letter-spacing: 1px;
}
.contact .section-header p {
color: #025db9;
/*font-size: 1.1rem;*/
/*max-width: 700px;*/
margin: 0 auto 40px;
line-height: 1.6;
}
/* Form input styles */
.contact input,
.contact textarea {
width: 100%;
padding: 15px 20px;
border: 2px solid #02a274;
border-radius: 12px;
/*font-size: 1rem;*/
margin-bottom: 20px;
transition: all 0.3s ease;
background-color: white;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}
.contact input:focus,
.contact textarea:focus {
outline: none;
border-color: #025db9;
box-shadow: 0 0 0 3px rgba(2, 93, 185, 0.15);
}
/* Submit button */
.submit-btn {
background-color: #025db9;
color: white;
padding: 14px 30px;
border: none;
border-radius: 30px;
/*font-size: 1rem;*/
font-weight: bold;
cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.submit-btn:hover {
background-color: #02a274;
transform: translateY(-2px);
}
/* Responsive tweaks */
@media (max-width: 768px) {
.contact input,
.contact textarea {
font-size: 1rem;
}
.submit-btn {
width: 100%;
}
}
/* 1. Algemene header aanpassingen */
.site-header, .site-header.small-height {
/* --- NIEUW: Desktop styling (80% breedte en gecentreerd) --- */
width: 80%;
max-width: 1600px; /* Een maximumbreedte voor zeer grote schermen */
left: 50%;
transform: translateX(-50%);
border-radius: 0 0 24px 24px; /* Optioneel: mooie afgeronde hoeken onderaan */
box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* Iets meer schaduw voor een 'zwevend' effect */
}
/* 6. Aanpassingen voor mobiel: header weer 100% maken */
@media screen and (max-width: 1023px) {
/* --- NIEUW: Overschrijf de desktopstijl voor mobiel --- */
.site-header, .site-header.small-height {
width: 100%;
left: 0;
transform: none;
border-radius: 0; /* Verwijder de afgeronde hoeken op mobiel */
max-width: none; /* Verwijder de maximumbreedte */
}
}
/* 3. Stijl voor de navigatielinks */
/*.site-header .primary-nav .menu-item > a,
.site-header.small-height .primary-nav .menu-item > a {
min-height: 85px;
color: #ffffff;
}*/
/* 4. Actieve menulink een gele onderstreping geven */
.primary-nav .menu-item.active > a {
position: relative;
color: #025db9 !important;
background-color: transparent !important;
}
.primary-nav .menu-item.active > a::after {
content: '';
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
height: 3px;
background-color: #025db9;
}
.primary-nav-list .menu-item > a:hover {
color: #025db9 !important;
}
.primary-nav .menu-item.active > a::before {
content: '';
position: absolute;
bottom: -45px;
left: 50%;
transform: translateX(-50%); /* Center the element */
width: 90px; /* Wider than the SVG image */
height: 60px; /* Make it a perfect circle */
background-color: #02a274;
border-radius: 0 0 24px 24px; /* Circle shape */
z-index: -5;
display: flex;
align-items: center;
justify-content: center;
background-image: url('../images/LachendeSmiley.svg');
background-repeat: no-repeat;
background-position: center;
background-size: 45px 45px; /* Size of SVG inside the circle */
}
/* FOOTER */
:root {
--green: #02a274; /* background */
--light: #e6f1ec; /* panel */
--ink: #fff; /* blue text */
--accent: #FFC206; /* yellow icon + button stroke */
--button: #1ea67d; /* button fill */
--white: #fff;
}
* {
box-sizing: border-box
}
body {
margin: 0;
font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
color: var(--white);
background: #fff
}
/* FOOTER WRAP */
footer.footer {
position: relative;
overflow: hidden;
background: #02a274;
padding: 56px 20px 28px;
}
/* Simple top wave */
footer.footer::before {
content: "";
position: absolute;
inset: -18vw 0 auto 0;
height: 25vw;
background: #fff;
border-bottom-left-radius: 60% 90%;
border-bottom-right-radius: 10% 40%;
transform: translateY(-100%);
}
.container {
max-width: 1170px;
margin: 0 auto;
}
/* FOLLOW STRIP */
.follow {
display: grid;
gap: 20px;
grid-template-columns: 1fr auto;
align-items: start;
}
.follow h2 {
margin: 0 0 10px;
font-weight: 800;
}
.follow p {
margin: 0;
max-width: 640px;
line-height: 1.5
}
.follow .lead {
display: flex;
gap: 14px;
align-items: center;
}
.lead .icon {
width: 44px;
height: 44px
}
.lead {
margin-bottom: 0px;
margin-top: 20px;
}
.follow .cta {
display: inline-block;
margin-top: 16px;
padding: 4px 20px;
border: 2px solid var(--accent);
border-radius: 28px;
background: transparent;
color: #FFC206;
font-weight: 800;
text-decoration: none;
}
.social {
display: flex;
gap: 18px;
align-items: center;
margin-top: 100px;
}
.social a {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 50%;
text-decoration: none;
}
.social img {
width: 90%;
height: 90%;
display: block;
}
/* LIGHT PANEL */
.panel {
position: relative;
margin-top: 34px;
background: var(--light);
color: #025db9;
border-radius: 28px;
padding: 42px 28px 28px;
}
.panel .grid {
display: grid;
gap: 26px;
grid-template-columns: 1.2fr 1fr 1fr;
align-items: start;
}
.brand {
justify-self: end;
color: #025db9;
}
.brand h3 {
margin: 0;
font-weight: 800;
color: #025db9;
}
.addr, .contact {
font-size: 16px;
line-height: 1.6;
color: #025db9;
}
.addr, .contact a {
font-size: 16px;
line-height: 1.6;
color: #025db9 !important;
}
.divider {
height: 2px;
background: #025db9;
margin: 26px 0 12px;
opacity: .8;
border-radius: 999px;
}
.copyright {
color: #025db9;
text-align: center;
font-weight: 700;
padding-bottom: 6px
}
/* Yellow sticker (replace with your SVG) */
.sticker {
position: absolute;
right: 26%;
top: -94px;
width: 180px;
pointer-events: none;
transform: rotate(-15deg);
}
@media (max-width:640px) {
.follow {
grid-template-columns: 1fr
}
.social {
justify-content: flex-start
}
.panel .grid {
grid-template-columns: 1fr
}
.sticker {
}
/* hide on small screens for simplicity */
}
.footer-icon {
width: 180px;
margin-bottom: 12px;
}
.icon-col {
display: flex;
justify-content: center; /* centers horizontally */
align-items: flex-end; /* pushes image to bottom */
height: 101px; /* set container height */
}
.footer-quote p {
border-left: 2px solid #fff; /* the vertical line */
padding-left: 14px; /* space between line and text */
margin: 1em 0; /* spacing around */
color: #fff; /* optional text color */
}
.volg-ons {
color: #fff !important;
}
.fototoestel {
width: 100px;
margin-bottom: 22px;
}
.about__btn {
width: fit-content;
margin-bottom: 12px;
}
/* AKINDOSTYLE */
#backgroundVideo {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
.hero-btn-group {
position: relative;
z-index: 1 !important;
}
.single-slide h3, .single-slide h5 {
position: relative;
color: white;
}
.link-blue a {
color: blue;
}
.cause-thumb {
width: 100%; /* Makes image responsive */
height: 200px; /* Adjust the height as needed */
object-fit: cover; /* Ensures the image covers the area without distorting aspect ratio */
}
.single-cause {
display: flex;
flex-direction: column;
height: 100%; /* Ensures each .single-cause takes full height of its container */
}
.cause-details {
flex-grow: 1; /* Allows the text container to expand and fill available space */
display: flex;
flex-direction: column;
}
.t-btn {
align-self: center; /* Center-aligns the button horizontally */
margin-top: 10px; /* Adds some space above the button */
margin-bottom: 10px; /* Ensures some space at the bottom as well */
}
.portfolio-item {
position: relative; /* Needed for absolute positioning inside */
overflow: hidden; /* Ensures content doesn't spill out */
}
.portfolio-item::before {
content: "";
display: block;
padding-top: 56.25%; /* 9/16 = 0.5625 = 56.25% */
}
.portfolio-item img {
position: absolute;
top: 0;
left: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
object-fit: cover; /* Ensures the image covers the area, cropping if necessary */
}
body {
margin: 0;
padding: 0;
}
.popup {
position: fixed;
bottom: 80px;
right: 6px; /* Adjust position slightly more in */
background: url('/images/VrijwilligerWorden.svg') no-repeat center/cover; /* Replace with your PNG path */
color: white;
padding: 108px 108px;
display: flex;
align-items: center;
transform: translateX(100%);
transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
/*font-size: 21px;*/
animation: none; /* Initially no animation */
}
.popup.show {
transform: translateX(0); /* Initial slide-in */
animation: bounceIn 1s ease-in-out forwards; /* Apply bounce animation */
}
@keyframes bounceIn {
0% {
transform: translateX(100%) scale(0.9); /* Start off-screen and slightly smaller */
}
60% {
transform: translateX(-10px) scale(1.1); /* Slight overshoot */
}
80% {
transform: translateX(5px) scale(0.98); /* Small bounce back */
}
100% {
transform: translateX(0) scale(1); /* Settle in place */
}
}
.popup .text {
display: flex;
flex-direction: column;
/*gap: 5px;*/
font-family: 'Baloo 2', sans-serif; /* Apply playful font */
position: fixed;
top: 116px;
left: 40px;
}
.popup .text a {
color: #FFC206; /* Match the tertiary color for links */
text-decoration: none;
font-weight: bold;
margin-top: 5px;
transition: color 0.3s ease, transform 0.3s ease; /* Add transform transition for animation */
position: relative;
}
.popup .text a:hover {
text-decoration: underline;
color: #FFD700; /* Slightly lighter hover color */
}
/* Bounce Animation */
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0); /* Start and end at original position */
}
40% {
transform: translateY(-15px); /* Move up */
}
60% {
transform: translateY(-10px); /* Small bounce back */
}
}
.clip-right-corner-up {
clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%, 0% 100%);
}
.clip-right-corner-down {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 85%, 0% 100%);
}
.event-details {
text-align: center;
}
.donate.section {
clip-path: polygon(0 0, 100% 6%, 100% 82%, 0% 100%, 0% 100%);
}
.image-icon {
width: 60px;
padding-left: 20px;
}
.image-icon-about {
width: 60px;
}
.instagram-container {
display: flex;
gap: 20px;
margin-top: 30px;
position: relative;
}
.instagram-container img {
width: 250px;
height: 250px;
object-fit: cover;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
padding: 10px;
}
.instagram-container img:hover {
opacity: 0.8;
cursor: pointer;
}
.play-label {
position: relative;
background-color: #02a274;
color: #ffffff;
padding: 10px 20px;
font-weight: bold;
font-size: 18px;
border-radius: 10px;
margin-top: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
}
.play-label a {
font-size: 1.2em;
color: white;
}
.play-label a:hover, .blob-text a:hover {
color: #FFC206
}
.header {
background-color: #025db9;
color: #ffffff;
padding: 20px 50px;
font-size: 24px;
text-align: center;
font-weight: bold;
position: relative;
left: 0px; /* Start off-screen */
clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 25% 100%, 5% 70%,1% 60%, 0% 50%, 25% 0%);
transition: left 1s ease-out; /* Animation for smooth sliding */
}
.blob-container {
position: relative;
width: 530px;
height: 250px;
left: -190px;
top: 100px;
}
.blob-container svg {
width: 100%;
height: 100%;
}
.blob-text {
position: absolute;
top: 50%;
left: 59%;
transform: translate(-50%, -50%);
color: #ffffff;
font-size: 24px;
text-align: center;
}
.blob-text a {
color: #ffffff;
font-size: 24px;
text-align: center;
font-weight: bold;
cursor: pointer;
}
.header span {
display: block;
margin-top: 10px;
}
@keyframes slideIn {
0% {
left: -500px;
}
100% {
left: 0;
}
}
.zoom-gallery {
text-align: center;
}
/* Employee Cards */
.card-container {
perspective: 1000px;
padding: 5px;
}
.card {
width: 250px;
height: 400px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s ease-in-out;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.card:hover {
transform: rotateY(180deg);
}
.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 10px;
background-color: #02a274;
padding: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
/* Ensure smoother backface visibility across browsers */
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.card-front h2, .card-back h2, .card-front p, .card-back p {
color: white;
}
.profile-pic {
width: 175px;
height: 175px;
border-radius: 50%;
margin-bottom: 10px;
}
.card-back {
transform: rotateY(180deg);
}
/* Structure and Content Styling */
.card-header {
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.card-content {
flex: 1 1 auto;
padding: 10px;
text-align: center;
max-height: 180px;
}
.card-content h2 {
font-size: 30px;
margin: 10px 0;
word-wrap: break-word;
min-height: 65px;
}
/* Add vendor prefixes for wider compatibility */
.card {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: transform 0.6s ease-in-out;
-moz-transition: transform 0.6s ease-in-out;
-o-transition: transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
}
.card:hover {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* start quote */
.quote-section {
display: flex;
justify-content: center;
align-items: center;
}
/*.quote-section {
background: linear-gradient(135deg, #025db9, #02a274);
padding: 50px;
border-radius: 15px;
text-align: center;
max-width: 600px;
margin: 50px auto;
position: relative;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.6);
opacity: 0;
transform: translateX(-100%);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.quote-section.visible {
opacity: 1;
transform: translateX(0);
}
.quote-content {
position: relative;
}
.quote-text {
font-size: 24px;
font-weight: bold;
color: #ffffff;
margin: 0;
padding: 0;
line-height: 1.4;
position: relative;
}
.quote-text::before, .quote-text::after {
content: '"';
font-size: 80px;
color: rgba(255, 255, 255, 0.3);
position: absolute;
font-weight: bold;
top: -20px;
}
.quote-text::before {
left: -25px;
transform: rotate(-10deg);
}
.quote-text::after {
right: -25px;
transform: rotate(10deg);
}
.quote-author {
font-size: 18px;
color: #FFC206;
margin-top: 20px;
font-style: italic;
}*/
/* end quote */
.vakantiehuis {
background-color: #FFC206;
padding: 5px 10px 5px 10px;
border-radius: 5px;
}
.vakantiehuis:hover {
background-color: #FFB100;
}
a .vakantiehuis {
font-size: 12px;
height: 100%;
width: 100%;
}
a .vakantiehuis:hover {
background-color: #fff !important;
}
.text-balloon {
position: relative;
background-color: #02a274;
color: white;
padding: 20px 40px;
border-radius: 100px / 70px;
font-family: 'Arial', sans-serif;
text-align: center;
width: 100%;
max-width: 500px;
aspect-ratio: 3.2;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.text-balloon:after {
content: '';
position: absolute;
bottom: -30px;
left: 30%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #02a274;
}
.text-content {
font-size: 2em;
line-height: 1.2;
padding: 20px;
word-break: break-word;
}
@media (max-width: 600px) {
.text-content {
font-size: 4vw;
}
}
.thought {
display: flex;
flex-direction: column;
background-color: #02a274;
padding: 40px 20px 20px 20px;
border-radius: 30px;
min-width: 40px;
max-width: 60%;
min-height: 40px;
margin: 20px;
position: relative;
align-items: center;
justify-content: center;
text-align: center;
color: white;
font-style: italic;
font-size: 28px;
line-height: 1.2;
}
.thought:before,
.thought:after {
content: "";
background-color: #02a274;
border-radius: 50%;
display: block;
position: absolute;
z-index: -1;
}
.thought:before {
width: 44px;
height: 44px;
top: -12px;
left: 28px;
box-shadow: -50px 30px 0 -12px #02a274;
}
.thought:after {
bottom: -10px;
right: 26px;
width: 30px;
height: 30px;
box-shadow: 40px -34px 0 0 #02a274, -28px -6px 0 -2px #02a274, -24px 17px 0 -6px #02a274, -5px 25px 0 -10px #02a274;
}
.text-white {
color: white;
}
.hero {
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: white;
position: relative;
overflow: hidden;
/*animation: backgroundFloat 10s infinite alternate-reverse ease-in-out;*/
transition: background-image 1s ease-in-out;
background-size: cover;
background-position: center;
}
.hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background: rgba(2, 3, 15, 0.25);*/
}
.hero-content {
/*position: relative;*/
z-index: 1;
max-width: 600px;
animation: slideIn 1.5s ease-out;
}
.hero:not(.pager) h1 {
font-size: 4em;
color: white;
margin-bottom: 20px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
padding-bottom: 10px;
border-bottom: solid 1px;
}
.hero:not(.pager) h1 .coloredTitle {
color: #FFC206;
}
.hero p {
font-size: 1.8rem;
color: white;
margin-bottom: 30px;
font-style: italic;
}
.hero .subtitle {
padding: 25px;
}
.hero .description {
font-size: 1.3rem;
color: white;
margin-bottom: 30px;
}
.cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.btn {
padding: 15px 30px;
border: none;
border-radius: 30px;
cursor: pointer;
transition: background 0.3s, transform 0.3s;
text-decoration: none;
font-weight: bold;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.btn:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.primary-btn {
background-color: #02a274;
color: white;
}
.primary-btn:hover {
background-color: #FFC206;
}
.secondary-btn {
background-color: #FFC206;
color: #333;
}
.secondary-btn:hover {
background-color: #02a274;
color: white;
}
/* Keyframe Animations */
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes backgroundFloat {
from {
background-position: center top;
}
to {
background-position: center bottom;
}
}
.quote-section {
opacity: 0;
transform: translateX(-100%);
will-change: transform, opacity;
}
.quote-section.slide-in {
animation: slideInWhimsical 0.8s forwards;
}
.quote-section.slide-out {
animation: slideOutWhimsical 0.6s forwards;
}
@keyframes slideInWhimsical {
0% {
transform: translateX(-100%) scale(0.8);
opacity: 0;
}
/* 50% {
transform: translateX(20%) scale(1.1);
opacity: 1;
}
70% {
transform: translateX(-10%) scale(0.95);
opacity: 1;
}
85% {
transform: translateX(5%) scale(1.05);
opacity: 1;
}*/
100% {
transform: translateX(0) scale(1);
opacity: 1;
}
}
/*@keyframes slideOutWhimsical {
0% {
transform: translateX(0) scale(1);
opacity: 1;
}
20% {
transform: translateX(-5%) scale(0.95);
opacity: 1;
}
100% {
transform: translateX(-100%) scale(0.8);
opacity: 0;
}
}*/
#preloader {
display: flex;
flex-direction: column; /* Stack children vertically */
justify-content: center; /* Center vertically */
align-items: center; /* Center horizontally */
position: fixed; /* Make sure it's fixed on the screen */
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999; /* Ensure it's on top */
}
#preloader > div {
display: flex;
flex-direction: column; /* Stack image above the spinner */
align-items: center; /* Center content horizontally */
margin-bottom: 80px;
}
.custom-logo2 {
margin-bottom: 20px; /* Add some space between the logo and the spinner */
}
/* General styles */
.info-container {
display: flex;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.column {
flex: 1;
padding: 20px;
min-width: 300px;
}
/* Highlighted paragraph styling */
.highlighted {
font-size: 1.1em;
line-height: 1.6;
padding: 15px;
margin-bottom: 15px;
background-color: #e0f7fa;
border-left: 5px solid #4dd0e1;
transition: transform 0.3s ease;
cursor: pointer;
}
/* Hover effect for highlighted text */
.highlighted:hover {
transform: scale(1.05);
background-color: #b2ebf2;
}
/* Alert box styling */
.alert-box {
padding: 15px;
background-color: #ffebee;
border-radius: 8px;
font-weight: bold;
color: #d32f2f;
margin-bottom: 20px;
animation: popIn 0.6s ease-out;
}
/* Important information styling */
.important-info {
font-size: 1.1em;
font-weight: bold;
padding: 15px;
background-color: #fff3e0;
border-left: 5px solid #ff9800;
animation: slideIn 1s ease-out;
}
/* Additional info section */
.additional-info {
text-align: center;
}
.section-title {
font-size: 1.8em;
color: #ff6f61;
margin-bottom: 20px;
position: relative;
animation: fadeIn 1s ease;
}
.additional-text {
font-size: 1.1em;
line-height: 1.6;
padding: 10px;
margin-bottom: 10px;
background-color: #f0f4c3;
border-radius: 8px;
animation: fadeInUp 0.7s ease-out;
transition: background-color 0.3s ease;
}
/* Hover effect for additional text */
.additional-text:hover {
background-color: #dcedc8;
}
/* Animations */
@keyframes popIn {
0% {
transform: scale(0.8);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes slideIn {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeInUp {
0% {
transform: translateY(20px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
/* Responsive Design */
@media (max-width: 768px) {
.info-container {
flex-direction: column;
}
.column {
min-width: 100%;
padding: 10px;
}
}
/* General styling for the container */
.camp-table-container {
display: flex;
justify-content: center;
padding: 20px;
width: 100%;
}
/* Table styling */
.camp-table {
width: 100%;
border-collapse: collapse;
/*border: 2px solid #4dd0e1;*/
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
font-family: 'Poppins', sans-serif;
background-color: #f9f9f9;
border-radius: 12px;
overflow: hidden;
}
/* Table header styling */
.camp-table thead th {
background-color: #025db9;
color: white;
padding: 15px;
text-align: left;
font-size: 1.2em;
text-transform: uppercase;
}
/* Table body styling */
.camp-table tbody td {
padding: 15px;
font-size: 1em;
border-bottom: 1px solid #ddd;
transition: background-color 0.3s ease;
}
/* Alternating row colors */
.camp-table tbody tr:nth-child(even) {
background-color: #f0f7fa;
}
/* Hover effect for rows */
.camp-table tbody tr:hover {
background-color: #b2ebf2;
}
/* Responsive table */
@media (max-width: 768px) {
.camp-table {
width: 100%;
}
.camp-table tbody td {
font-size: 0.9em;
}
}
/* Button styling */
.signup-button {
display: inline-block;
padding: 15px 30px;
font-size: 1.5em;
font-weight: bold;
text-align: center;
color: white;
background-color: #025db9;
border-radius: 50px;
text-decoration: none;
transition: opacity 0.5s ease-in-out, transform 0.3s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
z-index: 1000;
opacity: 0; /* Initially hidden */
transform: translateY(10px); /* Slightly lower for a smooth fade-in effect */
}
/* Apply when in scroll range */
.visible-signup {
opacity: 1;
transform: translateY(0);
}
/* Active effect */
.signup-button:active {
background-color: #FFC206;
}
/* Responsive scaling */
@media (max-width: 768px) {
.signup-button {
font-size: 1.2em;
padding: 12px 24px;
}
}
/* General styling for the sections */
.vacation-sections {
display: flex;
flex-direction: column;
gap: 50px; /* More space between the sections */
padding: 20px;
font-family: 'Poppins', sans-serif;
}
.sectionA {
background-color: #ddece5;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
transition: transform 0.5s ease, opacity 0.5s ease;
opacity: 0; /* Initially hidden */
transform: translateX(100%); /* Off screen */
}
/* Initial transformation for left and right slides */
.slide-left {
transform: translateX(-100%);
}
.slide-right {
transform: translateX(100%);
}
/* Active class to slide in */
.in-view {
opacity: 1;
transform: translateX(0);
}
/* Titles */
.sectionA h2 {
font-size: 1.8em;
color: #02a274;
margin-bottom: 15px;
}
/* Paragraph styling */
.sectionA p {
font-size: 1.1em;
line-height: 1.6;
margin-bottom: 20px;
color: #333;
}
/* Table styling */
.camp-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
.camp-table th, .camp-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.camp-table th {
background-color: #4dd0e1;
color: white;
font-size: 1.1em;
}
.camp-table td {
background-color: #f9f9f9;
}
/* Button styling */
.sectionA .btn {
display: inline-block;
padding: 12px 25px;
font-size: 1em;
font-weight: bold;
text-align: center;
color: white;
background-color: #025db9;
border-radius: 50px;
text-decoration: none;
transition: background-color 0.3s ease, transform 0.2s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
/* Hover effect for button */
.sectionA .btn:hover {
background-color: #025db9;
transform: translateY(-3px);
}
/* Active effect */
.sectionA .btn:active {
background-color: #025db9;
transform: translateY(1px);
}
/* Responsive scaling */
@media (max-width: 768px) {
.vacation-sections {
gap: 30px;
}
.camp-table {
font-size: 0.9em;
}
}
.breadcrumb {
list-style: none;
display: flex;
padding: 6px;
background-color: #02a274;
border-radius: 5px;
margin-bottom: 10px;
}
.breadcrumb-item {
margin: 0 5px;
font-size: 16px;
color: #333;
}
.breadcrumb-item a {
text-decoration: none;
color: #007bff;
}
.breadcrumb-item a:hover {
text-decoration: underline;
}
.breadcrumb-item::after {
margin-left: 5px;
color: #666;
}
.breadcrumb-item:last-child::after {
content: '';
}
.jumbotron {
height: 400px !important;
}
.jumbotron-content {
text-shadow: 1px 1px 2px black, 2px 2px 3px gray, 3px 3px 5px rgba(0, 0, 0, 0.3);
}
.padding30 {
padding-right: 30px;
padding-left: 30px;
}
/* Cookie Banner Styling - Positioned Bottom Left */
.cookie-banner {
position: fixed;
bottom: 20px;
left: 20px;
width: 340px;
background-color: #fff;
color: #333;
padding: 20px 20px 15px;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 14px;
z-index: 1000;
animation: fadeIn 0.5s ease-in-out;
text-align: center;
}
/* Cookie Icon - Placed at the Top */
.cookie-icon {
font-size: 32px; /* Bigger cookie emoji */
margin-bottom: 8px; /* Space between the icon and text */
}
/* Cookie Content (Text) */
.cookie-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
margin-bottom: 12px;
}
/* Text and Link */
.cookie-banner p {
margin: 0;
font-size: 14px;
line-height: 1.4;
}
.cookie-banner a {
color: #02a274;
font-weight: 700;
text-decoration: none;
}
.cookie-banner a:hover {
text-decoration: underline;
}
/* Button Styling */
.cookie-buttons {
display: flex;
gap: 10px;
width: 100%;
}
.cookie-buttons button {
flex: 1;
background: #02a274;
color: #fff;
border: none;
padding: 10px 15px;
border-radius: 8px;
cursor: pointer;
font-size: 13px;
text-transform: uppercase;
font-weight: 700;
transition: all 0.3s ease-in-out;
}
.cookie-buttons button:hover {
background: #02a041;
color: #fff;
}
#reject-cookies {
background: #025db9;
}
#reject-cookies:hover {
background: #024a8f;
}
/* Fade-in animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Styling */
@media (max-width: 768px) {
.cookie-banner {
width: 90%;
left: 5%;
bottom: 10px;
padding: 15px;
}
.cookie-buttons {
flex-direction: column;
width: 100%;
}
.cookie-buttons button {
width: 100%;
}
}
/* Container with a more dynamic grid layout */
/*.causes-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
padding: 20px;
justify-content: center;
}*/
/* Individual Cause Card */
/*.cause-card {
position: relative;
transition: transform 0.3s ease-in-out;
}
.cause-card:hover {
transform: scale(1.05);
}*/
/* Single Cause Styling */
/*.single-cause {
display: flex;
flex-direction: column;
align-items: center;
background: #025db9;
padding: 20px;
border-radius: 15px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
transition: 0.3s;
height: 100%;
}*/
/* Alternate colors for playful variation */
.cause-card:nth-child(1) .single-cause {
background-color: #02a274;
}
.cause-card:nth-child(2) .single-cause {
background-color: #e8eaf7;
color: #025db9 !important;
}
.cause-card:nth-child(3) .single-cause {
background-color: #025db9;
}
/* Title Styling */
.single-cause h3 {
font-size: 22px;
font-weight: 700;
color: white;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
margin-bottom: 15px;
}
/* Description Text */
.single-cause p {
font-size: 14px;
font-weight: 400;
color: white;
line-height: 22px;
text-align: center;
padding: 0 10px;
}
/* Button Styling */
.t-btn-ex-small {
display: inline-block;
background: #ffffff;
color: #025db9;
font-size: 14px;
padding: 10px 15px;
border-radius: 50px;
text-transform: uppercase;
font-weight: 700;
transition: all 0.3s;
text-align: center;
margin-top: auto;
}
.t-btn-ex-small:hover {
background: #025db9;
color: white;
transform: translateY(-3px);
}
/* Image Styling */
/*.cause-thumb {
width: 100%;
max-height: 200px;
object-fit: cover;
border-radius: 10px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
.cause-card:hover .cause-thumb {
transform: rotate(-2deg);
}*/
.policy-section {
padding: 60px 20px;
background: url('background.jpg') center/cover no-repeat;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
}
.policy-container {
background: rgba(255, 255, 255, 0.95);
padding: 40px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
max-width: 600px;
transition: transform 0.3s ease-in-out;
}
.policy-container:hover {
transform: scale(1.03);
}
.policy-content h2 {
color: #025db9;
margin-bottom: 15px;
font-family: 'Arial', sans-serif;
text-shadow: none;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.policy-content p {
color: #333;
margin-bottom: 20px;
line-height: 1.6;
font-style: normal;
}
.download-btn {
display: inline-flex;
align-items: center;
background: #02a274;
color: white;
padding: 12px 25px;
border-radius: 8px;
text-decoration: none;
font-weight: bold;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: background 0.3s, transform 0.3s;
}
.download-btn:hover {
background: #025db9;
transform: scale(1.05);
}
.pdf-icon-title {
width: 48px;
height: 48px;
}
.info-section {
display: block;
justify-content: center;
align-items: center;
text-align: center;
padding: 50px;
background: #02a274;
border-radius: 12px;
position: relative;
overflow: hidden;
}
/*.info-container {
max-width: 600px;
color: white;
}*/
.info-container h2 {
font-weight: bold;
color: #02a274;
}
.info-container p {
margin-bottom: 20px;
}
.info-btn {
background: #025db9;
color: white;
padding: 10px 20px;
border-radius: 6px;
text-decoration: none;
font-weight: bold;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: background 0.3s, transform 0.3s;
}
.info-btn:hover {
background: #014b8a;
transform: scale(1.05);
}
.background-svg {
position: absolute;
width: 80px;
}
.left-svg {
left: 0;
top: 50%;
transform: translateY(-50%);
}
.right-svg {
right: 0;
top: 50%;
transform: translateY(-50%);
}
.hero-content,
.quote-section,
.quote-section.slide-in,
.quote-section.slide-out,
.popup,
.popup.show,
.signup-button,
.additional-text,
.alert-box,
.policy-container:hover,
.sectionA.in-view {
contain: content;
}
.animated,
.in-view,
.slide-in,
.slide-out {
contain: content;
}
/* Optional: Hide animation-specific classes (if needed) */
.animated,
.in-view,
.slide-in,
.slide-out,
.popup,
.popup.show,
.signup-button,
.additional-text,
.alert-box,
.policy-container:hover,
.sectionA.in-view {
contain: content;
}
/* Make the SVG layer fill the section, which grows with content */
.wave-background {
position: absolute;
inset: 0; /* top:0 right:0 bottom:0 left:0 */
z-index: 0;
pointer-events: none; /* don’t block clicks on content */
margin-top: -130px;
}
.wave-background svg {
display: block;
}
.wave {
position: absolute;
bottom: -300px;
left: 0;
width: 100%;
height: 820px;
}
/* Ensure content sits above the SVG */
.content-layer {
position: relative;
}
@media (max-width: 1023px) {
.wave-background {
display: none;
}
.feature.section {
background-color: #00A174;
}
}
.feature.section.black-bg .container {
position: relative;
z-index: 1;
}
.vakantiehuis {
/* --- New styles to match the image --- */
/* Sets the text color to blue and the background to a whitish-gray */
color: #025db9 !important;
background-color: #f0f2f5;
/* Creates the rounded pill shape */
border-radius: 24px;
/* Adds space inside the button */
padding: 1px 8px;
/* Removes the default link underline */
text-decoration: none;
/* Allows padding to be applied correctly */
display: inline-block;
}
.accordion-image {
width: 100%;
object-fit: cover;
border-radius: 26px;
max-height: 360px;
}
.causes-container {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 32px;
}
/* card with background image */
.cause-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end; /* stick content to the bottom */
height: 540px; /* fixed card height */
border-radius: 24px;
overflow: hidden;
background-size: cover;
background-position: center;
}
/* content block with dynamic height */
.cause-buttons {
display: flex;
width: 100%;
border-radius: 9999px; /* round as one unit */
gap: 20px;
}
.cause-content {
padding: 24px;
text-align: center;
border-radius: 0 0 24px 24px; /* round bottom corners */
color: #fff !important;
border-radius: 24px;
}
.cause-content p {
color: white;
}
/* color variations */
.cause-content.green {
background: #02a274;
}
.cause-content.light-blue {
background: rgb(230, 240, 255);
color: #0C3B73;
}
.cause-content.blue {
background: rgb(0, 50, 120);
}
/* button */
.vakantie-button {
flex: 3;
margin-top: 16px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
padding: 10px 20px 10px 20px;
font-weight: 700;
text-decoration: none;
background: #fff;
color: inherit;
background-color: transparent;
border: 2px solid white;
text-decoration: none;
font-weight: bold;
transition: all 0.3s ease;
}
.vakantie-button:hover {
border-color: #FFC206;
}
.vrijwilliger-button {
flex: 3;
margin-top: 16px;
display: flex;
align-items: center;
justify-content: flex-start;
border-radius: 9999px;
padding: 10px 20px 10px 20px;
font-weight: 700;
text-decoration: none;
background: #fff;
color: inherit;
background-color: transparent;
border: 2px solid white;
text-decoration: none;
font-weight: bold;
transition: all 0.3s ease;
}
.vrijwilliger-button:hover {
border-color: #FFC206;
}
.vakantie-icon {
display: flex;
align-items: center;
justify-content: center;
border: 2px solid;
border-radius: 9999px;
color: inherit;
text-decoration: none;
font-size: 21px;
height: 48px;
width: 48px;
transform: rotate(-45deg);
margin-top: 16px;
}
.aanbod-icon {
display: flex;
align-items: center;
justify-content: center;
border: 2px solid;
border-radius: 9999px;
color: inherit;
text-decoration: none;
font-size: 21px;
height: 48px;
width: 48px;
transform: rotate(-45deg);
}
/* responsive */
@media (max-width: 1024px) {
.causes-container {
grid-template-columns: repeat(2, minmax(0,1fr));
}
}
@media (max-width: 640px) {
.causes-container {
grid-template-columns: 1fr;
}
.cause-card {
height: 400px;
}
}
/* ===== Scoped styles: volunteer-hero ===== */
.volunteer-hero {
position: relative;
min-height: 70vh;
display: grid;
place-items: center;
overflow: hidden;
isolation: isolate;
background: center/cover no-repeat;
}
/* waves */
.volunteer-hero__wave {
position: absolute;
left: 0;
width: 100%;
fill: #fff;
pointer-events: none;
}
.volunteer-hero__wave--top {
top: -1px;
transform: scaleY(1);
}
.volunteer-hero__wave--bottom {
bottom: -1px;
transform: rotateX(180);
}
/* glass card */
.volunteer-hero__card {
z-index: 2;
width: 600px;
padding: 2rem 2.25rem;
text-align: center;
border-radius: 24px;
background: rgba(255,255,255,.75);
box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
.volunteer-hero__eyebrow {
font-size: 1.7rem;
font-weight: bolder;
color: #025db9;
padding-bottom: 10px;
}
.volunteer-hero__title {
margin: .35rem 0 1rem;
font-weight: 700;
font-size: clamp(1rem,2.5vw,1.2rem);
}
.volunteer-hero__btn {
font-weight: 400;
font-size: 15px;
/* --- New styles to match the image --- */
/* Sets the text color to blue and the background to a whitish-gray */
color: #025db9;
background-color: #f0f2f5;
/* Creates the rounded pill shape */
border-radius: 24px;
/* Adds space inside the button */
padding: 1px 8px;
/* Removes the default link underline */
text-decoration: none;
/* Allows padding to be applied correctly */
display: inline-block;
}
.volunteer-hero__btn:hover {
color: #ca9b0d;
}
/* sticker */
.volunteer-hero__sticker {
position: absolute;
right: 19vw;
top: -0vw;
z-index: 8;
display: grid;
grid-auto-flow: column;
align-items: center;
}
.volunteer-hero__sticker .bubble {
width: 240px;
aspect-ratio: 1/1;
}
.volunteer-hero__sticker .bubble::before {
left: 28%;
}
.volunteer-hero__sticker .bubble::after {
right: 28%;
}
/* small tweaks for mobile */
@media (max-width:640px) {
.volunteer-hero {
min-height: 60vh;
}
.volunteer-hero__card {
padding: 1.25rem 1.1rem;
border-radius: 24px;
}
.volunteer-hero__sticker {
right: 2vw;
top: 2vw;
transform: scale(.85);
}
}
/* ====== CONNECTING THE DOTS ====== */
.ctd {
--green: #10a38a;
--green-700: #08927b;
--blue: #0a56a3;
--radius: 24px;
--shadow: 0 8px 24px rgba(0,0,0,.12);
position: relative;
display: grid;
grid-template-columns: 360px 1fr;
gap: clamp(12px, 3vw, 28px);
align-items: center;
isolation: isolate;
}
/* Left decorations */
.ctd-decor {
position: relative;
height: 100%;
min-height: 260px;
}
.ctd-decor .decor {
position: absolute;
opacity: .95;
filter: drop-shadow(0 2px 0 rgba(255,255,255,.6));
}
.ctd-decor .tree {
width: 160px;
left: 40px;
top: 10px;
}
.ctd-decor .sun {
width: 190px;
left: 110px;
top: 80px;
}
.ctd-decor .drop {
width: 140px;
left: 0;
bottom: -10px;
}
/* Card */
.ctd-card {
position: relative;
background: #00A878;
color: #fff;
border-radius: 28px;
padding: clamp(24px, 4vw, 40px);
box-shadow: var(--shadow);
min-height: 280px;
overflow: hidden;
text-align: center;
}
.ctd-slide p {
color: white;
}
.ctd-badge {
display: inline-block;
background: #00A878;
border: 2px solid #FFC206;
border-radius: 999px;
padding: 10px 18px;
font-weight: 800;
letter-spacing: .5px;
margin-bottom: 18px;
color: #FFC206;
}
/* Slides */
.ctd-track {
position: relative;
}
.ctd-slide {
transition: opacity .35s ease, transform .35s ease;
will-change: transform, opacity;
}
.ctd-slide[hidden] {
display: block !important;
opacity: 0;
position: absolute;
inset: 0;
transform: translateX(6%);
}
.ctd-slide.is-active {
position: relative;
opacity: 1;
transform: translateX(0);
}
.ctd-slide p {
line-height: 1.6;
max-width: 72ch;
margin: 0 0 18px 0;
}
/* Responsive */
@media (max-width: 980px) {
.ctd {
grid-template-columns: 1fr;
}
.ctd-decor {
order: 2;
min-height: 180px;
}
.ctd-card {
order: 1;
}
.ctd-decor .tree {
left: 10px;
top: -10px;
}
.ctd-decor .sun {
left: 120px;
top: 30px;
}
.ctd-decor .drop {
left: 16px;
bottom: -20px;
}
}
/* Motion preference */
@media (prefers-reduced-motion: reduce) {
.ctd-slide {
transition: none;
}
.ctd-arrow {
transition: none;
}
}
/* Wrapper that contains the three SVGs */
.ctd-decor {
position: relative;
width: 460px; /* tune as needed */
height: 360px; /* tune as needed */
}
/* Make children absolutely positioned so they can overlap */
.ctd-decor > svg,
.ctd-decor > img {
position: absolute;
display: block;
max-width: none; /* prevent auto scaling if they have width set */
transform-origin: center;
}
/* --- Positioning & layering (match image 2) --- */
/* If you *don't* have classes on the images, this works via nth-child */
.ctd-decor > :nth-child(1) { /* tree */
width: 180px;
left: 80px;
top: 10px;
transform: rotate(18deg);
z-index: 1; /* at the back */
}
.ctd-decor > :nth-child(2) { /* sun */
width: 180px;
left: 180px;
top: 120px;
transform: rotate(10deg);
z-index: 2;
}
.ctd-decor > :nth-child(3) { /* yellow drop/pizza */
width: 120px;
left: 40px;
top: 190px;
transform: rotate(-12deg);
z-index: 3; /* in front */
}
/* Card */
.ctd-card {
position: relative;
background: var(--green);
color: #fff;
border-radius: var(--radius);
padding: clamp(24px, 4vw, 40px);
box-shadow: var(--shadow);
min-height: 280px;
overflow: hidden;
}
/* Title badge (animated when it changes) */
.ctd-badge {
display: inline-block;
background: rgba(255,255,255,.12);
border: 2px solid rgba(255,255,255,.35);
border-radius: 999px;
padding: 10px 18px;
font-weight: 800;
letter-spacing: .5px;
margin-bottom: 18px;
transition: opacity .2s ease, transform .2s ease;
}
.ctd-badge.swap {
opacity: 0;
transform: translateY(-4px);
}
/* Slides */
.ctd-track {
position: relative;
min-height: 168px;
}
.ctd-slide {
position: absolute;
inset: 0;
opacity: 0;
transform: translateX(6%);
transition: opacity .35s ease, transform .35s ease;
pointer-events: none;
}
.ctd-slide.is-active {
position: relative;
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.ctd-slide p {
line-height: 1.6;
max-width: 72ch;
margin: 0 0 18px;
}
/* Button */
.ctd-btn {
display: inline-block;
background: #fff;
color: var(--green);
font-weight: 700;
padding: 10px 16px;
border-radius: 999px;
text-decoration: none;
box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
}
/* Arrows */
.ctd-nav {
position: absolute;
right: 36px;
bottom: 18px;
display: flex;
gap: 14px;
}
.ctd-arrow {
width: 54px;
height: 54px;
border-radius: 999px;
border: 2px solid rgba(255,255,255,.55);
background: rgba(255,255,255,.1);
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
transition: background .2s ease, transform .2s ease;
}
.ctd-arrow:hover {
background: rgba(255,255,255,.2);
transform: translateY(-1px);
}
/* Responsive */
@media (max-width: 980px) {
.ctd {
grid-template-columns: 1fr;
}
.ctd-decor {
order: 2;
height: 240px;
}
.ctd-card {
order: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.ctd-badge, .ctd-slide, .ctd-arrow {
transition: none;
}
}
/* Card */
.ctd-card {
position: relative;
background: #02a274;
color: #fff;
border-radius: var(--radius);
padding: clamp(24px, 4vw, 40px);
box-shadow: var(--shadow);
min-height: 280px;
overflow: hidden;
}
/* Title badge (animated when it changes) */
.ctd-badge {
display: inline-block;
background: #02a274;
border: 2px solid #FFC206;
border-radius: 999px;
padding: 10px 18px;
font-weight: 800;
letter-spacing: .5px;
margin-bottom: 18px;
transition: opacity .2s ease, transform .2s ease;
}
.ctd-badge.swap {
opacity: 0;
transform: translateY(-4px);
}
/* Slides */
.ctd-track {
position: relative;
min-height: 168px;
}
.ctd-slide {
position: absolute;
inset: 0;
opacity: 0;
transform: translateX(6%);
transition: opacity .35s ease, transform .35s ease;
pointer-events: none;
}
.ctd-slide.is-active {
position: relative;
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.ctd-slide p {
line-height: 1.6;
max-width: 72ch;
margin: 0 0 18px;
}
/* Button */
.ctd-btn {
display: inline-block;
background: #fff;
color: var(--green);
font-weight: 700;
padding: 10px 16px;
border-radius: 999px;
text-decoration: none;
box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
}
/* Arrows */
.ctd-nav {
display: flex;
gap: 18px;
}
.ctd-arrow {
width: 42px;
height: 42px;
border-radius: 999px;
border: 2px solid #025db9;
display: grid;
place-items: center;
cursor: pointer;
transition: background .2s ease, transform .2s ease;
}
.ctd-arrow:hover {
background: rgba(255,255,255,.2);
transform: translateY(-1px);
}
/* Responsive */
@media (max-width: 980px) {
.ctd {
grid-template-columns: 1fr;
}
.ctd-decor {
order: 2;
height: 240px;
}
.ctd-card {
order: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.ctd-badge, .ctd-slide, .ctd-arrow {
transition: none;
}
}
/* ===== Collage grid ===== */
.ak-collage {
--gap: 22px;
--radius: 22px;
--q-bg: #eaf1ff;
--q-text: #0a4ea2;
display: grid;
grid-template-areas:
"tall quote top"
"tall wide wide";
grid-template-columns: 1.05fr 1fr 1fr;
grid-template-rows: 320px 320px;
gap: var(--gap);
align-items: stretch;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
}
/* Generic item frame */
.ak-item {
background: #f4f6f8;
border-radius: var(--radius);
overflow: hidden;
position: relative;
margin: 0;
}
.ak-item > img:not(.ak-heart) {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Areas */
.ak-tall {
grid-area: tall;
}
.ak-quote {
grid-area: quote;
}
.ak-top-right {
grid-area: top;
}
.ak-wide {
grid-area: wide;
}
/* Quote card */
.ak-quote-box {
display: grid;
place-items: center;
text-align: center;
background: var(--q-bg);
color: var(--q-text);
height: 100%;
position: relative;
}
.ak-mark {
position: absolute;
top: 18px;
left: 50%;
transform: translateX(-50%);
font-weight: 800;
font-size: 42px;
line-height: 1;
opacity: .8;
}
.ak-quote-text {
font-weight: 800;
letter-spacing: .4px;
line-height: 1.35;
margin: 0 18px 6px;
text-transform: uppercase;
}
.ak-quote-author {
margin: 0;
font-weight: 700;
opacity: .8;
}
/* Heart sticker overlaps the bottom edge of the quote card */
.ak-heart {
position: absolute;
bottom: -28px; /* push out to overlap the image below */
left: 50%;
transform: translateX(-50%) rotate(-8deg);
width: 92px; /* tweak size as needed */
height: auto;
pointer-events: none;
z-index: 2;
}
/* ===== Responsive ===== */
@media (max-width: 980px) {
.ak-collage {
grid-template-areas:
"tall"
"quote"
"top"
"wide";
grid-template-columns: 1fr;
grid-template-rows: 340px 220px 220px 260px;
}
.ak-heart {
bottom: -36px;
width: 84px;
}
}
/* keep clipping for regular image frames */
.ak-item {
overflow: hidden;
}
/* (optional) ensure the wide image doesn't cover it) */
.ak-wide {
z-index: 1;
}
.ak-quote {
position: relative;
overflow: visible; /* so the heart can spill out */
z-index: 3;
}
.ak-quote-img {
display: block;
object-fit: cover; /* or 'contain' if your quote image should not crop */
border-radius: inherit; /* keep rounded corners on the image itself */
}
/* the heart stays absolutely positioned inside the quote box */
.ak-heart {
position: absolute;
bottom: -48px; /* negative to overlap */
left: 75%;
transform: translateX(-50%) rotate(18deg);
width: 100px;
pointer-events: none;
}
.support-card {
border: 2px solid #025db9;
border-radius: 42px;
padding: clamp(18px, 3vw, 28px);
display: grid;
grid-template-columns: 160px 1fr;
align-items: center;
gap: clamp(16px, 3vw, 28px);
color: #025db9;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
}
/* Left icon */
.support-icon {
width: clamp(96px, 12vw, 132px);
height: auto;
display: block;
margin-inline: auto;
}
/* Right content */
.support-body {
text-align: center;
}
.support-title {
margin: 4px 0 10px;
line-height: 1.2;
text-transform: uppercase;
font-weight: 800;
letter-spacing: .4px;
color: #025db9;
}
.support-text {
max-width: 780px;
margin: 0 auto;
line-height: 1.55;
color: #025db9;
}
.support-cta {
display: inline-flex;
align-items: center;
gap: 14px;
}
/* Buttons */
.btn-outline {
display: inline-block;
padding: 12px 22px;
border-radius: 999px;
border: 2px solid #025db9;
color: #025db9;
text-decoration: none;
font-weight: 800;
white-space: nowrap;
}
.btn-outline:hover {
background: rgba(10,86,163,.06);
}
.btn-round {
width: 44px;
height: 44px;
border-radius: 999px;
border: 2px solid #025db9;
display: grid;
place-items: center;
color: #025db9;
text-decoration: none;
}
.btn-round:hover {
background: rgba(10,86,163,.06);
}
/* Responsive: stack on small screens */
@media (max-width: 760px) {
.support-card {
grid-template-columns: 1fr;
text-align: center;
}
.support-icon {
margin-bottom: 4px;
}
}
.page-hero {
position: relative;
width: 100%;
min-height: 100vh; /* full viewport height */
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: grid; /* keeps future content centered if needed */
place-items: center;
isolation: isolate; /* ensures wave layers cleanly */
}
/* Optional soft darkening for readability (remove if not needed) */
.page-hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.05) 40%, transparent 70%);
pointer-events: none;
z-index: 0;
}
/* The white wave that visually overlaps the bottom of the hero */
.hero-wave-svg {
position: absolute;
left: 0;
right: 0;
bottom: -1px; /* hide any seam */
width: 100%;
height: clamp(120px, 18vw, 240px); /* responsive wave height */
display: block;
pointer-events: none;
z-index: 1; /* above the background, below your content */
}
/* If you add content later inside the hero, keep it above everything */
.page-hero > *:not(.hero-wave-svg) {
z-index: 2;
}
/* Example: next section spacing is natural; no extra margin needed */
:root {
--blue: #025db9;
--header-h: 88px;
}
/* (from earlier) hero sits behind header */
.page-hero {
position: relative;
width: 100%;
min-height: 100vh;
background: center/cover no-repeat;
display: grid;
place-items: center;
margin-top: calc(-1 * var(--header-h));
padding-top: var(--header-h);
}
/* place content layer above bg & wave */
.hero-inner {
position: relative;
z-index: 2;
width: 100%;
display: grid;
place-items: center;
padding-inline: clamp(16px,3vw,28px);
}
/* Glass / see-through card */
.hero-card {
min-height: 200px;
display: grid;
align-items: center;
}
.hero-title {
margin: 0;
font-weight: 800;
color: #025db9;
}
/* Stickers overlay (float above the card) */
.hero-stickers {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
}
.sticker2 {
position: relative;
/*display: block;*/
width: 120px;
filter: drop-shadow(0 8px 14px rgba(0,0,0,.18));
}
.sticker-1 {
left: -228px;
bottom: -136px;
transform: rotate(-10deg);
}
.sticker-2 {
right: -112px;
top: -74px;
}
.vrijwil-page-1 {
left: -215px;
bottom: 49px;
transform: rotate(0deg) scale(-1, 1);
}
.vrijwil-page-2 {
left: 164px;
bottom: -143px;
}
.praktisch-page-1 {
left: 197px;
bottom: -151px;
}
.aanbod-page-1 {
left: 355px;
bottom: 72px;
}
.aanbod-page-2 {
right: 260px;
top: 118px;
}
.steunen-page-1 {
left: 362px;
bottom: 63px;
}
.steunen-page-2 {
right: 357px;
top: 144px;
transform: rotate(-10deg) scale(-1, 1);
}
.projecten-page-1 {
right: -192px;
bottom: -124px;
transform: rotate(-10deg) scale(-1, 1);
}
.projecten-page-2 {
left: -251px;
top: -65px;
transform: rotate(10deg);
}
.about-page-1 {
left: -45px;
bottom: -35px;
transform: rotate(-10deg);
}
.about-page-2 {
right: -56px;
top: -45px;
transform: rotate(0deg);
}
.inschrijven-page-1 {
left: -45px;
top: -65px;
transform: rotate(20deg);
}
.inschrijven-page-2 {
right: 56px;
bottom: -90px;
transform: rotate(-20deg);
}
.vrijwilzon-page-1 {
right: -192px;
bottom: -125px;
width: 180px;
}
.contact-page-1 {
left: 211px;
bottom: -125px;
transform: rotate(0deg);
width: 160px;
}
.account-page-1 {
left: -290px;
bottom: -81px;
width: 180px;
}
.sticker-3 {
right: 28vw;
bottom: 10vh;
}
@media (max-width: 780px) {
.hero-card {
max-width: min(760px, 94%);
}
.sticker-3 {
display: none;
}
}
.html5-video-player:not(.ytp-transparent), .html5-video-player.unstarted-mode, .html5-video-player.ad-showing, .html5-video-player.ended-mode {
background-color: white !important;
}
.squiggle {
/* adjust these */
height: 12px; /* thickness of the wave area */
margin: 24px 0 48px 0; /* spacing around it */
/* repeating wave made with an SVG path */
background: url("data:image/svg+xml;utf8,\
") repeat-x left center;
background-size: 40px 12px; /* wave width x height; tweak for tighter/looser squiggles */
}
/* ---------- layout ---------- */
.mv {
--mv-gap: 28px; /* space between columns/rows */
--mv-radius: 22px; /* image corner radius */
--mv-blue: #025db9; /* heading color */
--mv-yellow: #f2b622; /* squiggle color (adjust if needed) */
display: grid;
grid-template-columns: 1fr 24px 1fr; /* left | squiggle | right */
grid-template-rows: auto auto; /* images row, then text row */
gap: 28px 2px;
}
/* images (row 1, columns 1 and 3) */
.mv__img {
width: 100%;
aspect-ratio: 1 / 1; /* square-ish like the mockup */
object-fit: cover;
border-radius: var(--mv-radius);
display: block;
}
/* text columns (row 2) */
.mv__text {
font: 400 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
color: #18314a;
}
/* headings */
.mv__title {
margin: 0 0 8px;
font-weight: 800;
letter-spacing: 0.02em;
color: var(--mv-blue);
}
/* vertical squiggle (row 2, middle column).
It stretches to the tallest text column because grid rows size to their tallest cell. */
.mv__squiggle-vert {
width: 24px; /* controls squiggle width */
align-self: stretch; /* fill the text row height */
background: url("data:image/svg+xml;utf8,\
") repeat-y center top;
background-size: 24px 40px; /* wave width × wave height; tweak for density */
}
/* spacing between paragraphs if needed */
.mv__text p + p {
margin-top: 10px;
}
/* ---------- responsive ---------- */
@media (max-width: 993px) {
.mv {
grid-template-columns: 1fr; /* stack */
grid-template-rows: auto auto auto auto;
}
.mv__squiggle-vert {
display: none;
}
/* hide vertical squiggle on small screens */
}
/**umb_name:Groen*/
.text-green {
color: #02a274;
}
/**umb_name:Blauw*/
.text-blue {
color: #025db9;
}
/**umb_name:Geel*/
.text-yellow {
color: #FFC206;
}
/**umb_name:Lichtblauw*/
.text-light-blue {
color: #e8eaf7;
}
/**umb_name:Lightgroen*/
.text-light-green {
color: #ddece5;
}
/* EXTRA */
.volunteer-signup {
position: relative;
overflow: hidden;
}
.volunteer-signup__image {
width: 100%;
height: 400px; /* Adjust this to your desired height */
object-fit: cover;
display: block;
/*transform: rotate(1deg);*/
clip-path: polygon(0 0, 100% 0%, 100% 82%, 0% 100%, 0% 100%);
}
.volunteer-signup__title {
color: #025db9;
font-size: 20px;
margin-bottom: 10px;
font-weight: bolder;
}
.volunteer-signup__description {
color: #025db9 !important;
font-size: 16px;
margin-bottom: 20px;
line-height: 1.5;
}
.volunteer-signup__button {
padding: 10px 25px;
background-color: transparent;
color: #0e6a45;
border: 2px solid #02a274;
text-decoration: none;
border-radius: 20px;
font-weight: bold;
display: inline-block;
transition: all 0.3s ease;
}
.volunteer-signup__button:hover {
background-color: #02a274;
color: white;
}
@media (max-width: 1200px) {
.volunteer-signup__image {
height: 200px;
}
.volunteer-signup {
padding-top: 50px;
position: relative;
overflow: hidden;
}
}
.onderbreking {
border-left: 2px solid #025db9;
border-right: 2px solid #025db9;
}
.nopadding {
padding-left: 0;
padding-right: 0;
}
.text-blue-important {
color: #025db9 !important;
}
.button-blue-important {
color: #025db9;
border: 2px solid #025db9;
}
.button-blue-important:hover {
color: #FFC206;
border-color: #FFC206;
}
.button-yellow-important {
color: #FFC206;
border: 2px solid #FFC206;
max-width: fit-content;
align-self: center;
}
.button-yellow-important:hover {
color: #025db9;
border-color: #025db9;
}
/* --- Scoped styles (all under .projects__wrap) --- */
.projects__wrap {
--projects__blue: #0c4a8a;
--projects__text: #1e3a5f;
--projects__border: #f0b43c;
--projects__bg: #ffffff;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
color: var(--projects__text);
}
.projects__grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 28px;
align-items: start;
}
/* Photo */
.projects__photo {
margin: 0;
border-radius: 28px;
overflow: hidden;
box-shadow: 0 6px 18px rgba(0,0,0,.08);
height: 100%;
}
.projects__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Cards stack */
.projects__cards {
display: grid;
gap: 24px;
}
/* Card */
.projects__card {
background: var(--projects__bg);
border: 2px solid var(--projects__border);
border-radius: 18px;
padding: 22px 28px;
}
.projects__card--spaced {
margin-top: 12px; /* subtle separation like the mockup */
}
/* Titles */
.projects__title {
margin: 0 0 12px;
color: var(--projects__blue);
font-weight: 800;
letter-spacing: .02em;
text-transform: uppercase;
line-height: 1.15;
font-size: 24px;
}
/* Body text */
.projects__text {
margin: 0 0 12px;
line-height: 1.65;
font-size: 16px;
}
/* --- Responsive --- */
@media (max-width: 900px) {
.projects__grid {
grid-template-columns: 1fr;
}
.projects__photo {
max-height: 420px;
}
}
@media (min-width: 1300px) {
.projects__grid {
max-width: 1200px;
}
}
:root {
--ink: #025db9;
--muted: #38506f;
--brand: #025db9; /* your blue if needed */
--accent: #ffc206; /* loopy arrow */
--card-grad1: #f35ba4; /* pink-ish */
--card-grad2: #ff7c66; /* warm orange */
--bg: #ffffff;
--ring: #1e3a8a1a;
--radius: 28px;
--radius-lg: 32px;
--shadow: 0 6px 18px rgba(12,24,46,.08);
--font: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}
* {
box-sizing: border-box
}
.donate {
color: #025db9;
background: #fff;
padding: 48px 0px 2px 0;
}
.donate__wrap {
margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 420px;
gap: 40px;
position: relative;
padding-bottom: 24px
}
@media (max-width: 990px) {
.donate__wrap {
grid-template-columns: 1fr;
}
}
.donate__left {
display: flex;
flex-direction: column;
gap: 24px;
}
.donorinfo-badge {
width: 450px;
height: auto;
border-radius: 12px;
padding-left: 128px;
}
.donorinfo-badge-arrow {
width: 160px;
position: absolute;
right: 430px;
top: 152px;
}
.donate__points {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 16px;
line-height: 1.55;
}
.donate__points li {
position: relative;
padding-left: 16px;
color: #025db9;
}
.donate__points a {
color: #FFC206 !important;
text-decoration: underline !important;
text-decoration-color: #FFC206 !important;
}
.donate__cta {
display: flex;
align-items: center;
gap: 16px;
margin-top: auto;
margin-bottom: 22px;
}
.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
height: 56px;
padding: 0 22px;
border: 2px solid var(--brand);
color: var(--brand);
font-weight: 700;
letter-spacing: .2px;
border-radius: 999px;
text-decoration: none;
box-shadow: 0 2px 0 rgba(2,93,185,.05);
}
.btn-outline:hover {
background: rgba(2,93,185,.06);
}
.btn-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 999px;
border: 2px solid var(--brand);
color: var(--brand);
text-decoration: none;
}
.btn-circle span {
transform: translateX(1px);
}
.donate__note p {
margin-top: 6px;
color: #025db9;
line-height: 1.4;
max-width: 63%;
text-align:center;
}
/* Right card */
.donate__right {
display: flex;
justify-content: center;
}
.qr-card {
width: 100%;
max-width: 420px;
border-radius: var(--radius-lg);
color: #fff;
text-align: center;
padding: 28px 0px 22px 28px;
}
.qr-card__qr img {
width: 100%;
height: auto;
display: block;
}
.qr-card__brand {
opacity: .95;
font-weight: 700;
letter-spacing: .2px;
}
/* Loopy arrow */
.loopy-arrow {
position: absolute;
right: 460px;
top: 70px; /* tune for perfect position */
width: 280px;
height: 160px;
}
@media (max-width: 1100px) {
.loopy-arrow {
display: none;
}
}
.loopy-arrow path {
fill: none;
stroke: var(--accent);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.loopy-arrow marker polygon {
fill: var(--accent);
}
sponsors__wrap {
--sponsors__border: #025db9; /* blue outline */
--sponsors__radius: 22px;
--sponsors__gap: 22px;
--sponsors__card-bg: #fff;
--sponsors__shadow: 0 4px 10px rgba(0,0,0,.05);
max-width: 1200px;
margin: 0 auto;
padding: 12px 16px 28px;
background: transparent;
}
/* Grid that adapts to any count */
.sponsors__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 22px;
list-style: none;
padding: 0;
margin: 0;
}
/* Each logo sits in a rounded square card */
.sponsors__item {
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #025db9;
border-radius: 36px;
aspect-ratio: 1 / 1; /* makes perfect squares */
}
/* Optional link wrapper (so entire card is clickable if a URL is provided) */
.sponsors__link {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
/* Logos scale nicely regardless of original aspect ratio */
.sponsors__logo {
max-width: 90%;
max-height: 80%;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
/* Tweak spacing on small screens */
@media (max-width: 640px) {
.sponsors__grid {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 16px;
}
.sponsors__item {
padding: 14px;
}
}
/* ===== Contact Form Styles (prefixed, no variables) ===== */
form input {
margin-bottom: 0;
}
.contact_contact-card {
background: #e9edfb;
border-radius: 22px;
padding: 22px;
margin: 0 auto;
margin-bottom: 60px;
box-shadow: 0 2px 0 0 rgba(43, 89, 195, .04) inset;
}
.contact_grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.contact_field {
display: flex;
flex-direction: column;
align-items: stretch;
}
.contact_field label {
display: block;
font-weight: 600;
color: #025db9;
margin-bottom: 8px;
}
.contact_field label span {
color: #025db9;
}
.contact_contact-card input[type="text"],
.contact_contact-card input[type="email"],
.contact_contact-card input[type="tel"],
.contact_contact-card textarea {
width: 100%;
background: #ffffff;
border: 1px solid #e3e7f6;
border-radius: 10px;
padding: 8px 16px;
font-size: 16px;
color: #1d2433;
outline: none;
transition: box-shadow .15s ease, border-color .15s ease;
}
.contact_contact-card input::placeholder,
.contact_contact-card textarea::placeholder {
color: #7f8aa3;
}
.contact_contact-card input:focus,
.contact_contact-card textarea:focus {
border-color: #025db9;
box-shadow: 0 0 0 4px rgba(43, 89, 195, .35);
}
.contact_error {
display: block;
min-height: 18px;
margin-top: 6px;
font-size: 13px;
color: #c62828;
}
.contact_btn-send {
display: inline-flex;
align-items: center;
gap: 10px;
background: #025db9;
color: #ffffff;
border: 0;
border-radius: 12px;
padding: 12px 18px;
font-weight: 700;
cursor: pointer;
transition: transform .06s ease, filter .15s ease;
}
.contact_btn-send:active {
transform: translateY(1px);
}
.contact_btn-send[disabled] {
filter: saturate(.3) opacity(.7);
cursor: not-allowed;
}
.contact_spinner {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, .35);
border-top-color: #ffffff;
display: none;
animation: contact_spin .9s linear infinite;
}
.contact_btn-send.loading .contact_spinner {
display: inline-block;
}
#contact_formStatus {
margin-top: 12px;
font-size: 14px;
color: #7f8aa3;
}
#contact_formStatus.ok {
color: #1b873e;
}
#contact_formStatus.err {
color: #c62828;
}
@keyframes contact_spin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 720px) {
.contact_grid-2 {
grid-template-columns: 1fr;
}
}
/* ===== Team Grid & Cards (equal-height, intro = 1 card) ===== */
.team_wrap {
display: grid;
gap: 22px;
max-width: 1070px;
margin: 0 auto;
align-items: stretch; /* stretch items to row height */
}
/* Desktop: 3 columns; intro is just another cell */
@media (min-width: 1024px) {
.team_wrap {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* Tablet: 2 columns */
@media (min-width: 640px) and (max-width: 1023.98px) {
.team_wrap {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Mobile: 1 column */
@media (max-width: 639.98px) {
.team_wrap {
grid-template-columns: 1fr;
}
}
/* ===== Intro image behaves like a card (1 cell tall) ===== */
.team_intro {
margin: 0;
border-radius: 22px;
overflow: hidden;
background: #ffffff;
height: 520px; /* same as .team_card */
}
.team_intro img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* ===== Card (fixed equal height) ===== */
.team_card {
border-radius: 44px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 4px 20px rgba(14, 24, 40, 0.08);
height: 500px; /* equal, taller cards */
display: flex;
flex-direction: column;
}
/* Photo occupies the remaining height above the green panel */
.team_card-media {
width: 100%;
height: calc(100% - 160px); /* card height minus panel */
}
.team_card-media img {
width: 115%;
height: 115%;
object-fit: cover;
display: block;
}
/* Green bottom panel: fixed height to keep cards equal */
.team_card-body {
height: 160px; /* matches calc() above */
background: #02a274;
color: #ffffff !important;
padding: 16px 16px 14px;
display: flex;
flex-direction: column;
border-radius: 44px;
text-align: center;
}
.blue {
background: #025db9;
}
/* Text (clamped so it never pushes the panel taller) */
.team_name {
margin: 0 0 4px;
font-size: 18px;
font-weight: 700;
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
color: white;
}
.team_role {
margin: 0 0 12px;
font-size: 18px;
opacity: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
color: white;
}
/* Actions stay at the bottom of the green panel */
.team_actions {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
/* Email pill */
.team_btn-email {
display: inline-block;
padding: 11px 14px;
background: #1a8f64;
color: #ffffff;
border-radius: 999px;
font-weight: 800;
font-size: 12px;
letter-spacing: .3px;
text-decoration: none;
white-space: nowrap;
transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
box-shadow: 0 2px 0 rgba(0,0,0,.04) inset;
}
.team_btn-email:hover {
filter: brightness(1.05);
}
.team_btn-email:active {
transform: translateY(1px);
}
/* Circular arrow button */
.team_btn-circle {
flex: none;
width: 40px;
height: 40px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff;
background: transparent;
border: 2px solid rgba(255,255,255,.75);
text-decoration: none;
transition: background .15s ease, transform .06s ease;
}
.team_btn-circle:hover {
background: rgba(255,255,255,.12);
}
.team_btn-circle:active {
transform: translateY(1px);
}
/* ===== Scoped styles (api_ prefix) ===== */
.api_card {
background: #fff;
border: 3px solid #f2b52c; /* yellow border */
border-radius: 22px;
padding: 22px;
max-width: 1000px;
margin: 0 auto;
}
/* Header with graphic + centered text */
.api_header {
display: grid;
grid-template-columns: 120px 1fr;
gap: 16px;
align-items: center;
margin-bottom: 14px;
min-height: 100px;
}
.api_header-graphic {
width: 120px;
height: 100px;
}
.api_header-text {
text-align: center;
}
.api_header-text h2 {
margin: 0 0 6px;
color: #0c3f91;
font-size: 18px;
letter-spacing: .5px;
}
.api_header-text p {
margin: 2px 0;
color: #1e4089;
font-size: 14px;
line-height: 1.45;
}
/* Accordion */
.api_item {
margin-top: 12px;
}
/* Question bar (button) */
.api_q {
all: unset;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background: #e9edfb; /* light blue bar */
color: #0c3f91;
border-radius: 28px;
padding: 16px 18px 16px 18px;
cursor: pointer;
}
.api_q:focus-visible {
outline: 3px solid rgba(12,63,145,.35);
outline-offset: 2px;
}
.api_q-label {
font-weight: 800;
font-size: 14px;
letter-spacing: .3px;
}
/* Plus button at right */
.api_plus {
position: relative;
width: 36px;
height: 36px;
border-radius: 999px;
background: #e6ebfb;
flex: 0 0 auto;
}
.api_plus::before,
.api_plus::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 16px;
height: 2px;
background: #0c3f91;
transform: translate(-50%,-50%);
border-radius: 2px;
}
.api_plus::after {
transform: translate(-50%,-50%) rotate(90deg);
}
/* Answer area */
.api_a {
overflow: hidden;
max-height: 0;
transition: max-height .3s ease;
}
.api_a-inner {
padding: 14px 8px 0 8px;
color: #23345a;
font-size: 14px;
line-height: 1.55;
}
/* Open state */
.api_item.open .api_a {
max-height: 300px;
}
/* large enough for typical content */
.api_item.open .api_plus::after {
transform: translate(-50%,-50%) rotate(90deg) scaleY(0);
}
/* turn + into − */
.praktisch_h2 {
color: #025db9 !important;
padding-left: 10px;
}
.acount_container {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 40px;
padding: 20px;
margin-bottom: 20px;
font-family: 'Arial', sans-serif;
}
.acount_box {
flex: 1;
border: 2px solid #0c4da2;
border-radius: 25px;
padding: 25px 30px;
text-align: center;
color: #0c4da2;
box-sizing: border-box;
}
.acount_title {
font-weight: 700;
font-size: 16px;
margin-bottom: 10px;
text-transform: uppercase;
color: #025db9;
}
.acount_text {
font-size: 15px;
line-height: 1.4;
color: #0c4da2;
margin: 0;
}
.acount_info_box {
background-color: #eef1fb;
border-radius: 25px;
padding: 30px 40px;
text-align: center;
color: #0c4da2;
font-family: 'Arial', sans-serif;
max-width: 900px;
margin: 0 auto;
box-sizing: border-box;
}
.acount_info_title {
font-weight: 700;
font-size: 16px;
margin-bottom: 15px;
text-transform: uppercase;
color: #0c4da2;
}
.acount_info_text {
font-size: 15px;
line-height: 1.6;
margin: 10px 0;
color: #0c4da2;
}
.acount_info_text strong {
font-weight: 700;
}
/* LAYOUT */
.vrijwil_wrap {
}
.vrijwil_chips {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 14px;
margin: 8px 0 22px
}
.vrijwil_role {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 18px;
background: #02a274;
border-radius: 28px;
padding: 18px
}
.vrijwil_emoji {
width: 64px;
}
.blauw {
color: #025db9;
}
.wit {
color: #fff;
}
.quote {
border-left: 1px solid white; /* or your chosen color */
padding-left: 14px; /* space between line and text */
}
.vrijwil_title {
display: inline-flex;
align-items: flex-start;
gap: 10px;
margin-top: 0;
line-height: 1.1;
}
.vrijwil_title img {
height: 1.6em; /* increase size */
width: auto;
flex-shrink: 0;
display: block;
transform: translateY(-10px);
}
.vrijwill_title img
.vrijwill_title svg {
vertical-align: top;
}
.vrijwil_media {
overflow: hidden;
border-radius: 20px
}
.vrijwil_media img {
width: 101%;
height: 101%;
object-fit: cover;
display: block
}
.vrijwil_card {
background: #02a274;
color: #fff;
border-radius: 4px;
padding: 0px 22px;
display: flex;
flex-direction: column;
gap: 10px
}
.vrijwil_course {
margin-top: 26px;
background: #fff;
border: 3px solid #025db9;
border-radius: 28px;
padding: 20px;
margin-bottom: 20px;
}
.vrijwil_course-h {
text-align: center;
text-transform: uppercase;
letter-spacing: .08em;
color: #025db9;
margin: 0 0 8px
}
.vrijwil_cgrid {
display: grid;
grid-template-columns: 120px 1fr;
gap: 16px
}
/*
.vrijwil_cicon {
background: rgba(2,93,185,.14);
border-radius: 18px;
display: grid;
place-items: center;
padding: 16px
}*/
.vrijwil_cicon img {
width: 192px;
height: 192px
}
/* CHIPS (equal width per row) */
.vrijwil_chip {
width: 100%;
padding: 12px 18px;
border: 2px solid #025db9;
border-radius: 24px;
background: transparent;
color: #025db9;
text-transform: uppercase;
text-align: center;
cursor: pointer;
transition: .15s;
font-weight: 600;
}
.vrijwil_chip:hover {
background: #025db9;
color: #fff;
transform: translateY(-1px)
}
/* BUTTONS */
.vrijwil_btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 22px;
border-radius: 999px;
border: 2px solid transparent;
text-decoration: none;
transition: .15s
}
.vrijwil_primary {
background: #FFC206;
color: #1a1a1a
}
.vrijwil_primary:hover {
filter: brightness(1.05)
}
.vrijwil_ghost {
background: #fff;
border-color: #025db9;
color: #025db9
}
.vrijwil_ghost:hover {
background: #025db9;
color: #fff
}
.vrijwil_iconbtn {
width: 44px;
height: 44px;
border-radius: 999px;
background: #025db9;
display: inline-grid;
place-items: center
}
.vrijwil_iconbtn img {
width: 20px;
height: 20px;
filter: invert(1)
}
/* RESPONSIVE */
@media (max-width:980px) {
.vrijwil_role {
grid-template-columns: 1fr
}
}
@media (max-width:840px) {
.vrijwil_chips {
grid-template-columns: repeat(2,1fr)
}
}
@media (max-width:560px) {
.vrijwil_chips {
grid-template-columns: 1fr
}
.vrijwil_cgrid {
grid-template-columns: 1fr
}
.vrijwil_cicon {
max-width: 120px; justify-self: center;
}
}
}
/* container */
.vrijwil_wrap {
padding: 0px 0px 56px 0px;
margin-inline: auto;
color: #143a59;
line-height: 1.65;
font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
/* top image row */
.vrijwil_photoRow {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-bottom: 28px;
}
@media (max-width: 992px) {
.vrijwil_photoRow {
grid-template-columns: 1fr;
}
}
.vrijwil_photo {
width: 100%;
aspect-ratio: 16 / 11;
object-fit: cover;
border-radius: 22px;
box-shadow: 0 10px 24px rgba(7,48,84,.08);
display: block;
}
/* two columns */
.vrijwil_cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
}
.vrijwil_col .vrijwil_h2 {
color: #0a57a5;
font-weight: 800;
letter-spacing: .4px;
margin: .2rem 0 1rem;
font-size: clamp(22px, 2.6vw, 28px);
text-transform: uppercase;
}
.vrijwil_lede {
color: #5f7d96;
margin: 0 0 1.2rem;
}
/* orange side bar block */
.vrijwil_withBar {
position: relative;
padding-left: 18px;
}
.vrijwil_withBar::before {
content: "";
position: absolute;
left: 0;
top: .2rem;
bottom: .2rem;
width: 4px;
border-radius: 4px;
background: #ffa441;
}
.vrijwil_withBar p {
margin: .6rem 0;
}
/* CTA button */
.vrijwil_cta {
margin-top: 22px;
}
.vrijwil_btn {
appearance: none;
border: 0;
border-radius: 999px;
background: #02a274;
color: #fff;
font-weight: 700;
letter-spacing: .2px;
padding: 10px 18px;
cursor: pointer;
}
/* make columns stretch and allow pushing CTA to the bottom */
.vrijwil_cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: stretch; /* ensure equal heights */
}
/* turn each column into a flex box */
.vrijwil_col {
display: flex;
flex-direction: column;
}
/* push CTA to the bottom and center the button */
.vrijwil_cta {
margin-top: auto; /* pushes it to the bottom */
text-align: center; /* centers the button */
}
.vrijwil_btn {
display: inline-block; /* so text-align works */
}
.kok_card {
background: #eef0ff;
border-radius: 28px;
padding: 26px;
box-shadow: 0 10px 24px rgba(9,41,87,.06) inset;
margin-inline: auto;
font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
color: #14446f;
}
.kok_inner {
display: grid;
grid-template-columns: 1.05fr 1.25fr;
gap: 28px;
align-items: center;
}
/* LEFT */
.kok_left {
display: flex;
flex-direction: column;
height: 100%;
}
.kok_titleRow {
display: flex;
align-items: center;
gap: 10px;
margin: 6px 0 14px;
}
.kok_title {
margin: 0;
font-weight: 800;
font-size: clamp(28px, 4vw, 36px);
color: #0a57a5;
letter-spacing: .4px;
}
.kok_emojis {
display: inline-flex;
gap: 6px;
color: #52c18b;
}
.kok_emoji {
width: 26px;
height: 26px;
}
.kok_intro {
display: flex;
gap: 14px;
}
.kok_bar {
width: 2px;
border-radius: 2px;
background: #2d63b8;
flex: 0 0 2px;
margin-top: 2px;
}
.kok_copy p {
margin: .6rem 0 0;
line-height: 1.65;
font-size: 16px;
color: #025db9;
}
/* CTA */
.kok_cta {
margin-top: auto;
padding-top: 18px;
}
.kok_btn {
display: inline-block;
padding: 14px 24px;
border-radius: 999px;
border: 3px solid #f2c14e;
background: #fff6d8;
color: #0a57a5;
font-weight: 800;
text-decoration: none;
letter-spacing: .2px;
box-shadow: 0 6px 18px rgba(242,193,78,.25);
transition: transform .06s ease, box-shadow .15s ease, background-color .15s ease;
}
.kok_btn:hover {
transform: translateY(-1px);
background: #fff2bf;
}
.kok_btn:active {
transform: translateY(0);
box-shadow: 0 3px 10px rgba(242,193,78,.22);
}
/* RIGHT IMAGE */
.kok_right {
margin: 0;
}
.kok_photo {
width: 100%;
height: auto;
display: block;
border-radius: 18px;
box-shadow: 0 10px 22px rgba(9,41,87,.12);
object-fit: cover;
}
/* make the grid rows stretch to the tallest item (the photo) */
.kok_inner {
display: grid;
grid-template-columns: 1.05fr 1.25fr;
gap: 28px;
align-items: stretch; /* ← important */
}
/* push all left content to the bottom */
.kok_left {
display: flex;
flex-direction: column;
justify-content: flex-end; /* ← bottom-align the whole block */
}
/* keep the button centered/wide if you want */
.kok_cta {
padding-top: 18px;
text-align: left;
}
/* or center */
/* layout */
.keuk_grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 26px;
margin-inline: auto;
font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
color: #143a59;
margin-top:24px;
margin-bottom: 24px;
}
/* card */
.keuk_card {
border: 2px solid #0a57a5; /* blue */
border-radius: 22px;
padding: 22px 26px 26px;
display: flex;
flex-direction: column; /* so CTA can stick to bottom */
align-items: center;
text-align: center;
background: #fff;
}
/* title */
.keuk_title {
margin: 6px 0 8px;
color: #0a57a5; /* blue */
font-weight: 800;
letter-spacing: .4px;
text-transform: uppercase;
font-size: clamp(22px, 2.6vw, 28px);
}
/* copy */
.keuk_text {
margin: .5rem 0 0;
line-height: 1.6;
max-width: 38ch;
color: #1a4c7b;
}
.keuk_text--last {
margin-top: 1rem;
}
/* CTA pinned to bottom and centered */
.keuk_cta {
margin-top: auto; /* pushes to bottom */
padding-top: 16px;
text-align: center;
}
/* responsiveness */
@media (max-width: 720px) {
.keuk_grid {
grid-template-columns: 1fr;
}
}
/* layout shell */
.logi_wrap {
display: grid;
grid-template-columns: 440px 1fr; /* images | text */
gap: 32px;
align-items: center;
max-width: 1200px;
margin-inline: auto;
padding: 10px 16px;
font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
color: #143a59;
}
/* sticker cluster (two SVGs) */
.logi_stickers {
position: relative;
min-height: 260px;
}
.logi_sticker {
position: absolute;
display: block;
width: 160px;
height: auto;
}
.logi_sticker--back { /* blue round sticker at the back/left */
left: 0;
top: 65px;
z-index: 1;
}
.logi_sticker--front { /* green duo sticker overlapping in front/right */
left: 120px;
top: 0;
z-index: 2;
width: 220px;
}
/* content */
.logi_title {
margin: 0 0 10px;
font-weight: 800;
color: #025db9; /* blue */
text-transform: uppercase;
font-size: 28px;
}
.logi_copyWrap {
display: flex;
align-items: flex-start;
gap: 16px;
margin-top: 8px;
}
.logi_rule {
width: 4px;
background: #025db9; /* blue */
border-radius: 4px;
height: 100%;
min-height: 110px;
margin-top: 6px;
flex: 0 0 4px;
}
.logi_copy p {
margin: 0;
line-height: 1.65;
max-width: 72ch;
}
/* CTA */
.logi_cta {
text-align: center; /* button centered under text block */
margin-top: 28px;
width: fit-content;
padding-left: 14px;
}
/* responsiveness */
@media (max-width: 980px) {
.logi_wrap {
grid-template-columns: 1fr;
gap: 20px;
}
.logi_stickers {
min-height: 220px;
max-width: 520px;
margin-inline: auto;
}
.logi_sticker {
width: 240px;
}
.logi_sticker--back {
left: 10px;
top: 82px;
}
.logi_sticker--front {
left: 120px;
top: 0;
}
.logi_cta {
text-align: left;
}
/* optional on small screens */
}
.left-rule {
position: relative;
padding-left: 14px; /* space between rule and text */
}
.left-rule::before {
content: "";
position: absolute;
left: 0;
top: .2em; /* start a bit below first line */
bottom: .2em; /* end a bit above last line */
width: 2px;
border-radius: 2px; /* rounded ends */
background: #0a57a5; /* your blue */
}
.vak_wrapper {
padding: 2rem 0rem 3rem;
font-family: inherit;
color: #025db9; /* project blue */
margin: 0 auto;
}
.vak_intro {
text-align: center;
color: #025db9;
font-family: inherit;
font-size: 15px;
font-weight: 400;
margin: 0 0 2.5rem;
}
.vak_columns {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: space-between;
}
.vak_column {
flex: 1 1 320px;
max-width: 540px;
color: #025db9;
}
/* rounded bordered header box */
.vak_headerBox {
border: 2px solid #025db9;
border-radius: 32px;
padding: 3.5rem 1rem;
text-align: center;
margin-bottom: 1rem;
}
.vak_headerTitle {
color: #025db9;
letter-spacing: 0.02em;
margin: 0;
text-transform: uppercase;
}
/* each clickable row */
.vak_row {
width: 100%;
background: transparent;
border: 0;
padding: 0.75rem 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
cursor: pointer;
color: #025db9;
font-family: inherit;
text-align: left;
}
/* left text in row */
.vak_rowText {
text-transform: uppercase;
line-height: 1.4;
color: #025db9;
white-space: nowrap;
font-weight:bolder;
}
/* right icon circle */
.vak_rowIcon {
flex-shrink: 0;
width: 44px;
height: 44px;
border: 2px solid #025db9;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
color: #004B93;
}
/* underline between rows */
.vak_divider {
width: 100%;
border-bottom: 2px solid #025db9;
}
/* hover / focus states */
.vak_row:hover .vak_rowText,
.vak_row:focus-visible .vak_rowText,
.vak_row:hover .vak_rowIcon,
.vak_row:focus-visible .vak_rowIcon {
color: #FFC206; outline: none;
}
/* AKINDO – prefixed styles */
.ak_strip {
width: 100%;
background: #02a274; /* project green */
font-size: 1.4em;
font-weight: 400;
border-radius: 12px;
padding: 18px 24px;
display: grid;
place-items: center;
box-sizing: border-box;
margin-bottom: 0px;
}
.ak_strip_blue {
width: 100%;
background: #025db9; /* project green */
font-size: 1.4em;
font-weight: 400;
border-radius: 12px;
padding: 18px 24px;
display: grid;
place-items: center;
box-sizing: border-box;
margin-bottom: 0px;
}
.ak_strip__text {
color: #fff;
font-weight: 800;
text-transform: uppercase;
text-align: center;
margin: 0;
}
/* AKINDO – kampkaarten met Font Awesome (prefixed akcamp_) */
.akcamp_wrapper {
margin: 0 auto;
}
.akcamp_grid {
display: grid;
grid-template-columns: repeat(3, minmax(260px, 1fr)); /* always 3 columns on desktop */
gap: 28px;
}
.akcamp_card {
background: #ffffff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
color: #0F2E2D;
}
.akcamp_card__media {
display: block;
width: 100%;
height: 190px;
object-fit: cover;
}
/* lichtblauwe infozone */
.akcamp_card__body {
background: #CDDCD6;
padding: 14px 18px 16px;
flex: 1;
}
.akcamp_card__title {
margin: 0 0 10px;
font-weight: 800;
font-size: 14px;
text-transform: uppercase;
letter-spacing: .04em;
color: #025db9;
}
.akcamp_meta {
display: grid;
gap: 6px;
font-size: 13px;
color: #025db9;
}
.akcamp_meta__row {
display: grid;
grid-template-columns: 18px 1fr;
column-gap: 8px;
align-items: start;
line-height: 1.35;
color: #025db9;
}
/* icons in project blue */
.akcamp_meta__icon {
font-size: 15px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
color: #025db9; /* project blue */
}
/* CTA in project green */
.akcamp_card__cta {
display: block;
background: #02a274; /* project green */
color: #ffffff;
text-align: center;
padding: 11px 16px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
border-radius: 0 0 18px 18px;
letter-spacing: .04em;
cursor: pointer;
border: 0;
transition: background .15s ease, transform .08s ease;
}
.akcamp_card__cta:hover {
background: #018762; /* darker green on hover */
}
.akcamp_card__cta:active {
transform: translateY(1px);
}
/* Outer spacing for section titles */
.akcamp_section-title {
margin: 40px 0 30px; /* top + bottom spacing */
display: flex;
justify-content: center;
color: #025db9;
}
/* Ensure strips take full width but stay spaced vertically */
.akcamp_strip {
width: 100%;
background: #02a274; /* project green */
border-radius: 24px;
padding: 18px 24px;
display: grid;
place-items: center;
box-sizing: border-box;
margin-bottom: 40px; /* space below strip */
}
.akcamp_strip--blue {
background: #025db9; /* project blue */
margin-top: 40px; /* space above */
margin-bottom: 40px; /* space below */
}
/* Spacing around the grid */
.akcamp_wrapper {
margin: 0 auto;
margin-bottom: 40px; /* space under the grid */
}
/* Additional spacing between sections */
.akcamp_section {
margin-bottom: 60px;
}
/* ----------------------------------------- */
/* CARD COLOR MODIFIERS */
/* ----------------------------------------- */
/* GREEN CARD (light green background) */
.akcamp_card--green .akcamp_card__body {
background: #CDDCD6; /* light green */
}
.akcamp_card--green .akcamp_card__title,
.akcamp_card--green .akcamp_meta,
.akcamp_card--green .akcamp_meta__row,
.akcamp_card--green .akcamp_meta__icon {
color: #025db9; /* project blue text/icons */
}
/* CTA stays green by default, so no override needed */
/* ----------------------------------------- */
/* BLUE CARD (light blue background) */
/* ----------------------------------------- */
.akcamp_card--blue .akcamp_card__body {
background: #D8DFF0; /* light blue */
}
.akcamp_card--blue .akcamp_card__title,
.akcamp_card--blue .akcamp_meta,
.akcamp_card--blue .akcamp_meta__row,
.akcamp_card--blue .akcamp_meta__icon {
color: #025db9; /* project blue */
}
/* If you want the CTA to be blue instead of green */
.akcamp_card--blue .akcamp_card__cta {
background: #025db9;
}
.akcamp_card--blue .akcamp_card__cta:hover {
background: #014b94;
}
/* Make inputs fill the grid cell */
.contact_field input,
.contact_field textarea {
width: 100%;
margin: 0;
}