@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css');

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



:root {

    --body-fonts: "Poppins", sans-serif;



    --color-text: #263245;

    --color-primary: #B7C523;

    --color-secondary: #404040;

    --color-success: #74C2A5;

    --color-white: #ffffff;

    --color-warning: #ECBB73;

    --color-heading: #26343F;

    --color-paragrapgh: #2A2728

}



body {

    font-size: 18px;

    font-family: var(--body-fonts);

    line-height: 1.4;

    padding: 0;

    margin: 0;

}

body.sub-page {

    padding-top: 100px;

}

button[form="form1"][name="submitform"] {
    background-color: var(--color-primary);
    color: var(--color-white);
    margin-right: 10px;
    border-top-left-radius: 21px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 21px;
	padding: 15px;
}

button[form="form1"][name="submitform"]:hover {
    background-color: var(--color-primary);
}


div#site-canvas {
    position: relative;
    overflow: hidden;

}

.container {

    max-width: 1330px;

    margin-left: auto;

    margin-right: auto;

    padding-left: 15px;

    padding-right: 15px;

}



a {

    text-decoration: none;

    display: inline-block;

    transition: 0.35s all ease-in-out;

}



ul {

    padding: 0;

    margin: 0;

    list-style-type: none;

}



.badges {

    display: flex;

    gap: 15px;

}



.hero .badges {

    justify-content: flex-end;

}



.badge {

    padding: 12px 25px;

    border-radius: 7px;

    box-shadow: 0 3px 6px #00000029;

    font-size: 18px;

    line-height: 1;

    font-weight: 400;

    display: inline-flex;

    align-items: center;

    gap: 20px;

}



.badge.light {

    background-color: var(--color-white);

    color: var(--color-text);

}



.badge img {

    width: 20px;

    height: 20px;

}



.download-button {
    background-color: #00796b;
    color: white;
    padding: 12px 24px;
    text-decoration: none;
    font-size: 16px;
    border-radius: 6px;
    transition: background-color 0.3s;
}


.download-button:hover {
    background-color: #5a98d1; /* iets lichtere variant van blauw */
    color: #e0e0e0;
}



.button.primary, .button.primary.disabled, .button.primary.disabled:focus, .button.primary.disabled:hover,

.button.primary[disabled], .button.primary[disabled]:focus, .button.primary[disabled]:hover {

    background-color: var(--color-primary);

}



.button.light, .button.light.disabled, .button.light.disabled:focus, .button.light.disabled:hover,

.button.light[disabled], .button.light[disabled]:focus, .button.light[disabled]:hover {

    background-color: var(--color-white);

    color: var(--color-text);

}



.button.success, .button.success.disabled, .button.success.disabled:focus, .button.success.disabled:hover,

.button.success[disabled], .button.success[disabled]:focus, .button.success[disabled]:hover {

    background-color: var(--color-primary);

    color: var(--color-white);

}



.button.light:hover {

    opacity: 0.8;

}



.button.success:hover {

    opacity: 0.8;

    color: var(--color-white);

}



.page-content h1 {
    font-size: 36px;
    line-height: 53px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--color-heading);
}

h2 {
    font-size: 32px;
    line-height: 53px;
    font-weight: 500;
    margin-bottom: 0;
    color: var(--color-heading);
}



.section-title {

    margin-bottom: 40px;

    text-align: center;

    max-width: 600px;

    margin-left: auto;

    margin-right: auto;

}



.section-title h2 {

    position: relative;

}



.section-title h2:after {

    content: "";

    height: 5px;

    width: 130px;

    background-color: var(--color-warning);

    display: inline-block;

    position: absolute;

    left: 50%;

    bottom: 0;

    transform: translateX(-50%);

    border-radius: 5px;

}



html body label {

    font-size: 13px;

    margin-bottom: 4px;

}



html body input {

    border: 1px solid rgb(112, 112, 112, 0.2) !important;

    border-radius: 6px !important;

    background-color: var(--color-white);

}

html body input::placeholder {

    opacity: 0.7;

}



.form-buttons {

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.form-buttons button {

    margin: 0 !important;

}

.form-buttons button:last-child {

    margin-left: auto !important;

}



@media (max-width: 767px) {

    body {

        font-size: 16px;

    }



    h2 {

        font-size: 35px;

        line-height: 36px;

    }



    .button {

        font-size: 16px;

    }

}



/*--- Global Style End ---*/



/*--- Account Model Style Start ---*/

.account-modal {

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    padding: 50px;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    opacity: 0;

    visibility: hidden;

    z-index: -1;

    transition: 0.45s all ease-in-out;

}



.account-modal.show {

    opacity: 1;

    visibility: visible;

    z-index: 999;

}



.model-overlay {

    position: absolute;

    inset: 0;

    background-color: rgba(0, 0, 0, 0.7);

    z-index: -1;

}



.modal-inner {

    max-width: 500px;

    width: 100%;

    background-color: var(--color-white);

    padding: 20px;

    border-radius: 10px;

    position: relative;

    top: -100px;

    transition: 0.35s all ease-in-out;

}



.account-modal.show .modal-inner {

    top: 0;

}



.model-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 30px;

}



.model-header .model-logo {

    max-width: 270px;

}



.model-close-btn {

    width: 30px;

    cursor: pointer;

}



.account-modal h3 {

    font-size: 15px;

    font-weight: 400;

}



.password label {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}



.password a {

    color: var(--color-primary);

}



.password-input {

    position: relative;

}



.password-input .password-show {

    padding: 0;

    margin: 0;

    border: none;

    background-color: transparent;

    cursor: pointer;

    font-size: 13px;

    font-weight: 400;

    color: var(--color-primary);

    position: absolute;

    right: 15px;

    top: 50%;

    transform: translateY(-50%);

}



.account-form .button {

    width: 100%;

}



@media (max-width: 991px) {

    .account-modal {

        padding: 0;

    }



    .modal-inner {

        position: absolute;

        top: 0;

        width: 330px;

        background-color: var(--color-white);

        height: 100vh;

        flex-direction: column;

        align-items: flex-start;

        padding: 20px;

        left: -330px;

        transition: 0.45s all ease-in-out;

        overflow: auto;

        border-radius: 0;

    }



    .account-modal.show .modal-inner {

        left: 0;

    }



    .model-overlay {

        display: block;

        position: fixed;

        left: auto;

        right: -170px;

        top: 0;

        width: 50%;

        height: 100%;

        background-color: rgba(0, 0, 0, 0.2);

        z-index: -1;

        opacity: 0;

        visibility: hidden;

        overflow: auto;

        transition: 0.45s all ease-in-out;

    }



    .account-modal.show .model-overlay {

        opacity: 1;

        visibility: visible;

        right: 0;

    }



    .model-header .model-logo {

        width: 170px;

    }



    html body .hero-section::before {

        display: none;

    }

    html body .hero-section::after {

        content: '';

        display: inline-block;

        background-color: rgba(78, 140, 196, 0.6);

        position: absolute;

        left: 0;

        top: 0;

        width: 100%;

        height: 100%;

    } 

}



/*--- Account Model Style End ---*/



/*--- Header Style Start ---*/

.header {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    z-index: 999;

    padding: 10px 0;

    background: transparent;

}

body.sub-page .header {

    background-color: #f0f8fd;

    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);

}

#site-canvas .header .container {

    max-width: 100%;

}

#site-canvas .header-nav__left {

    display: flex;

    align-items: center;

    gap: 20px;

    flex: 0 1 50%;

}

#site-canvas .contact {

    text-align: right;

}

#site-canvas .header-nav__right {

    flex: 0 1 50%;

    justify-content: flex-end;

}

#site-canvas .header-nav {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

}



.logo {

    max-width: 80px;

    width: 100%;

}



.logo img {

    width: 100%;

}



#site-canvas .nav {

    display: flex;

    align-items: center;

    gap: 20px;

    flex: 1 1 auto;

    /* margin: 0 0 0 auto; */

}

#site-canvas .header-nav .menu > ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

#site-canvas .header-nav .menu > ul li {

    position: relative;

}

.page-content {
	padding-top: 0px;
}
 .back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    background-color: #4E8CC4; /* zelfde kleur als je iconen */
    color: #fff;
    padding: 12px 20px;
    border: none;
    border-top-left-radius: 21px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 21px;    
	font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s ease;
  }

  .back-to-top:hover {
    background-color: #3b6ea0;
  }
#site-canvas .menu a {

    font-size: 14px;
    color: var(--color-white);
    text-transform: capitalize;
    font-weight: 600;
	padding: .7rem 0.9rem;
}

#site-canvas .dropdown a {

    color: var(--color-text);

}



#site-canvas body.sub-page .menu a {

    color: #000;

}



#site-canvas .menu a:hover {

    color: var(--color-primary);

}

#site-canvas .menu a:active {

    color: var(--color-primary);

}



#site-canvas .nav .logo,

#site-canvas .menu-close-btn,

#site-canvas .menu-btn,

#site-canvas .nav-overlay {

    display: none;

    cursor: pointer;

}





#site-canvas .dropdown {

    background-color: var(--color-white);

    border-radius: 0;

    overflow: hidden;

    border: 1px solid var(--color-primary);

    padding: 10px;

    width: 100%;

    margin: 0 !important;

    border-top-right-radius: 45px;

    border-bottom-left-radius: 45px;

}


#site-canvas .has-dropdown a, 
#site-canvas .menu-item-has-children a {

    display: inline-flex !important;

    align-items: center;

}


#site-canvas .has-dropdown > a:after,
#site-canvas .menu-item-has-children > a:after {

    margin-left: .255em;

    vertical-align: .255em;

    content: "";

    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDkgMTQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI2OTAxIDUuNTY0MzZDOC4yNjkwMSA1LjU5NzcxIDguMjY0ODMgNS42MjY5IDguMjU2NDggNS42NTE5MUM4LjI0ODEzIDUuNjc2OTMgOC4yMjcyNiA1LjY5Nzc3IDguMTkzODcgNS43MTQ0NUw0Ljg2MjgxIDkuMDY2NDlDNC44NDYxMSA5LjA4MzE2IDQuODIxMDYgOS4wOTU2NyA0Ljc4NzY3IDkuMTA0MDFDNC43NTQyNyA5LjExMjM1IDQuNzI5MjMgOS4xMTY1MiA0LjcxMjUzIDkuMTE2NTJDNC42NzkxNCA5LjExNjUyIDQuNjQ1NzQgOS4xMTIzNSA0LjYxMjM1IDkuMTA0MDFDNC41Nzg5NiA5LjA5NTY3IDQuNTUzOTEgOS4wODMxNiA0LjUzNzIxIDkuMDY2NDlMMS4yMDYxNSA1LjcxNDQ1QzEuMTg5NDUgNS42OTc3NyAxLjE3Mjc1IDUuNjc2OTMgMS4xNTYwNiA1LjY1MTkxQzEuMTM5MzYgNS42MjY5IDEuMTMxMDEgNS41OTc3MSAxLjEzMTAxIDUuNTY0MzZDMS4xMzEwMSA1LjUzMSAxLjEzOTM2IDUuNTAxODIgMS4xNTYwNiA1LjQ3NjhDMS4xNzI3NSA1LjQ1MTc5IDEuMTg5NDUgNS40MjI2MSAxLjIwNjE1IDUuMzg5MjVMMS41NTY3OSA1LjAzOTA0QzEuNTczNDggNS4wMjIzNiAxLjU5ODUzIDUuMDA1NjggMS42MzE5MiA0Ljk4OTAxQzEuNjY1MzIgNC45NzIzMyAxLjY5ODcxIDQuOTYzOTkgMS43MzIxMSA0Ljk2Mzk5QzEuNzQ4OCA0Ljk2Mzk5IDEuNzczODUgNC45NzIzMyAxLjgwNzI0IDQuOTg5MDFDMS44NDA2NCA1LjAwNTY4IDEuODY1NjggNS4wMjIzNiAxLjg4MjM4IDUuMDM5MDRMNC43MTI1MyA3Ljg0MDc0TDcuNTE3NjQgNS4wMzkwNEM3LjUzNDM0IDUuMDIyMzYgNy41NTkzOCA1LjAwNTY4IDcuNTkyNzcgNC45ODkwMUM3LjYyNjE3IDQuOTcyMzMgNy42NTEyMSA0Ljk2Mzk5IDcuNjY3OTEgNC45NjM5OUM3LjcwMTMxIDQuOTYzOTkgNy43MzQ3IDQuOTcyMzMgNy43NjgwOSA0Ljk4OTAxQzcuODAxNDkgNS4wMDU2OCA3LjgyNjUzIDUuMDIyMzYgNy44NDMyMyA1LjAzOTA0TDguMTkzODcgNS4zODkyNUM4LjIyNzI2IDUuNDIyNjEgOC4yNDgxMyA1LjQ1MTc5IDguMjU2NDggNS40NzY4QzguMjY0ODMgNS41MDE4MiA4LjI2OTAxIDUuNTMxIDguMjY5MDEgNS41NjQzNloiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=");

    border: none;

    width: 12px;

    flex: 0 0 12px;

    background-repeat: no-repeat;

    background-size: 10px;

    height: 13px;

    display: none;

}



#site-canvas .dropdown li a {

    display: block;

    width: 100%;

    clear: both;

    font-weight: 400;

    text-align: inherit;

    text-decoration: none;

    white-space: pre-wrap;

    background-color: transparent;

    border: 0;

    padding: 15px 20px;

    line-height: 1.2;

}



#site-canvas .dropdown li a:hover {

    background-color: #f8f9fa;

}



#site-canvas .dropdown li + li {

    border-top: 1px solid var(--color-primary);

}



#site-canvas .menu .active > a {

    background-color: transparent;

    color: inherit;

}

.contact-bar {

    display: flex;

}

.contact-bar p {

    margin: 0;

    font-size: 16px;

    line-height: 21px;

    color: #0a0a0a;

}

.contact-bar a {

    color: #1779ba;

    display: inline-block;

    cursor: pointer;

}

.contact-bar .text-small {

    font-size: 14px;

    line-height: 19px;

}

.icon-bg {

    position: relative;

}



.phone-image {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}

@media (min-width: 992px) {

    .mobile__header {

        display: none;

    }

    #site-canvas .header-nav .dropdown {     
        position: absolute !important;
    }

    #site-canvas .dropdown {

        position: absolute;

        top: 34px;

        left: 0 ;

        display: block;

        z-index: 9999;

        visibility: hidden;

        transition: 0.3s all ease-in-out;

        opacity: 0;

        width: 250px;

        box-shadow: 5px 0 50px 0 rgba(0, 0, 0, 0.25);        

    }


    #site-canvas .has-dropdown:hover .dropdown,
    #site-canvas .menu-item-has-children:hover .dropdown {

        visibility: visible;

        opacity: 1;

    }

    #site-canvas .dropdown.open {

        top: 100% !important;

        z-index: 999999;

        visibility: visible;

        opacity: 1;

    }

    #site-canvas .has-dropdown a,
    #site-canvas .menu-item-has-children a {

        gap: 10px;

    }

    .contact-bar {

        height: 80px;        

    }

    body.sub-page .header-nav__right {

        flex: 0 0 auto;

    }

    body.sub-page .header .container {

        width: 94%;

    }

}



@media (max-width: 991px) {

    .contact-bar__mobile {

        flex: 0 1 200px;

        font-size: 14px;

    }



    .menu-btn {

        flex: 0 1 200px;

    }



    .contact-bar__mobile .contact-bar__grid {

        margin: 0;

    }

    

    .header-nav {

        justify-content: space-between;

        gap: 10px;

        color: #fff;

    }



    #site-canvas .has-dropdown > a:after,
    #site-canvas .menu-item-has-children > a:after {

        display: inline-block;

    }



    #site-canvas .nav {

        position: absolute;

        top: 0;

        width: 330px;

        background-color: var(--color-white);

        height: 100vh;

        flex-direction: column;

        align-items: flex-start;

        padding: 20px;

        left: -330px;

        transition: 0.45s all ease-in-out;

        overflow: auto;

    }



    #site-canvas .nav-overlay {

        display: block;

        position: fixed;

        right: -60%;

        top: 0;

        width: 100%;

        height: 100%;

        background-color: rgba(0, 0, 0, 0.2);

        z-index: -1;

        opacity: 0;

        visibility: hidden;

        overflow: auto;

        transition: 0.65s all ease-in-out;

    }



    #site-canvas .nav.show {

        left: 0;

        z-index: 1000;

        box-shadow: 5px 4px 10px rgba(0, 0, 0, 0.2);

    }



    #site-canvas .nav.show .nav-overlay {

        opacity: 0;

        visibility: visible;

        right: 0;

    }



    body.nav-open {

        overflow: hidden;

    }



    #site-canvas .nav ul {

        flex-direction: column;

        width: 100%;

        margin-top: 20px;

    }



    #site-canvas .nav .logo {

        display: block;

    }



    #site-canvas .menu li {

        border-bottom: 1px solid rgba(112, 112, 112, 0.23);

    }



    #site-canvas .menu li:last-child {

        border-bottom: none;

    }



    #site-canvas .menu a {

        padding: 20px 15px;

    }



    #site-canvas .menu-close-btn,

    #site-canvas .menu-btn {

        display: block;

        font-size: 0;

    }



    .menu-close-btn svg,

    .menu-btn svg {

        width: 35px;

        height: 25px;

    }



    .menu-close-btn {

        position: absolute;

        right: 15px;

        top: 15px;

    }



    #site-canvas .dropdown {

        position: relative;

        display: none;

    }



    #site-canvas .has-dropdown.active .dropdown,
    #site-canvas .menu-item-has-children.active .dropdown {

        display: block;

    }

    .hero__image {

        display: none;

    }

    #site-canvas .menu a {

        color: #000000;

    }

    #site-canvas .has-dropdown a,
    #site-canvas .menu-item-has-children a {

        display: flex !important;

    }

    #site-canvas .has-dropdown > a:after,
    #site-canvas .menu-item-has-children > a:after {

        position: absolute;

        right: 0;

    }

    #site-canvas .has-dropdown a > svg,
    #site-canvas .menu-item-has-children a > svg {

        display: none;

    }

    #site-canvas .menu .active > a {

        color: #000;

    }

    

}

@media (max-width: 768px) {

    .contact-bar__mobile .contact {

        display: none;

        position: fixed;

        top: 70px;

        background: white;

        max-width: 300px;

        right: 0;

        color: black;

        padding: 20px;

    }

    .contact-bar__mobile .contact.active {

        display: block;

    }

    .contact-bar__mobile {

        justify-content: flex-end;

    }

}



/*--- Header Style End ---*/



/* Hero video section styles start */

.hero-section {

    position: relative;

    min-height: 550px;

    margin-bottom: 0px;

    z-index: 0;

}

.hero-section::before {

    content: '';

    width: 100%;

    height: 100px;

    display: inline-block;

    position: absolute;

    left: 0;

    top: 0;

    background-color: #fff;

    z-index: 2;

}

.hero__video {

    position: absolute;

    width: 100%;

    height: 100%;

    object-fit: cover;

    pointer-events: none;

    background: black;

    transform: scale(2.2);

    height: 32vh;

}



.hero__image {

    position: absolute;

    top: 0px;

    height: 84vh;

    z-index: 999;

    left: 0;

    width: 60%;

    min-height: 500px;

}



.hero__image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: right bottom;

}

.hero__content {

    height: 80vh;

}

.hero-section__overlay {

    position: absolute;

    z-index: 9999;

    padding: 90px 30px;

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    height: 100%;

    top: 184px;

    top: 50%;

    transform: translateY(-46%);

    width: 54%;

    left: 0;

}

.hero-section__overlay h1 {

    font-size: 46px;

    line-height: 52px;

    padding-bottom: 15px;

    max-width: 400px;

    font-weight: 600;

}

  .hero-section__overlay p {

    color: #fff;

    margin-bottom: 40px;

    font-size: 16px;

    max-width: 450px;

  }

  .hero-section__overlay .button {

    font-weight: 400;

    min-width: 195px;

    font-size: 16px;

    line-height: 21px;

  }

  .hero-section__overlay .button.primary {

    background-color: var(--color-primary);

    color: var(--color-white);

    margin-right: 10px;

    border-top-left-radius: 21px;

    border-top-right-radius: 0;

    border-bottom-right-radius: 20px;

    border-bottom-left-radius: 21px;

  }

  .hero-section__overlay .button.primary:hover {

    background-color: var(--color-white);

    color: var(--color-secondary);

  }

  

  .hero-section__overlay .button.secondary {

    background-color: var(--color-white);

    color: var(--color-secondary);

    border-top-left-radius: 0;

    border-top-right-radius: 21px;

    border-bottom-right-radius: 21px;

    border-bottom-left-radius: 20px;

  }

  .hero-section__overlay .button.secondary:hover {

    background-color: var(--color-primary);

    color: var(--color-white);

  }

@media (min-width: 992px) {

  .hero__video {

    left: 10%;
    left: 29%;
    top: 25%;

  }

  .hero__image img {

    height: 100%;
  }

}

@media (max-width: 991px) {

    .header {

        background-color: #fff;

    }

    .menu-btn svg path {

        fill: #000;

    }

    .hero-section__overlay {

        max-width: 100%;

        width: 100%;

        padding: 30px 50px;

        z-index: 99;

    }

    .hero__video {

        transform: scale(2);

        background: transparent;

        height: 70vh;

    }

    .hero__content {

        overflow: hidden;

    }

}

@media (max-width: 768px) {

    .hero-section {

        margin-bottom: 0px;

    }

    .hero-section__overlay h1 {

        font-size: 30px;

        line-height: 35px;

    }

    

    .hero-section__overlay {

        padding: 30px 20px;

    }

    

    .hero-section__overlay p {

        font-size: 15px;

    }

}

@media (max-width: 600px) {

    .hero__video {

        transform: scale(3);

    }

}

@media (max-width: 520px) {

    .hero-section__overlay .button.primary {

        margin-bottom: 20px;

    }

}

@media (max-width: 480px) {

    .hero__video {

        transform: scale(3);

    }

}

@media (max-width: 380px) {

    .hero__video {

        transform: scale(3);

    }

}

/* hero video sectin styles end */



/* Why choose us section styles start  */

.why-choose-us-section {

    padding: 0 0 130px;

    margin-top: 0px;

}

.why-choose-us-section h2 {

    font-size: 32px;

    line-height: 65px;

    padding-bottom: 20px;

    display: flex;

    align-items: center;

    gap: 21px;



}

.why-choose-us-section .main-grid {

    gap: 20px;

    justify-content: space-between;

}

.why-section-grid-item {

    gap: 10px;

}

.why-section-grid-item p {

    margin: 0;

    font-size: 16px;

    line-height: 21px;

}

@media (max-width:992px) {

    .why-choose-us-section {

        margin-top: 0;

        padding-top: 20px;

        padding-bottom: 60px;

        z-index: 1;

        background-color: #fff;

        position: relative;

    }

}

@media (max-width: 480px) {

    .why-choose-us-section h2 {

        display: block;

    }

}

/* Why choose us section styles end  */



/* Features section styles start */

.features-section {

    padding-top: 40px;

    background-color: #F0F8FD;

}

.features-section h2 {

    padding-bottom: 20px;

}

.features-section .small__text {

    font-size: 20px;

    line-height: 27px;

    color: var(--color-primary);

    max-width: 400px;

}

.features-section h3 {

    font-size: 18px;

    line-height: 24px;

    font-weight: 600;

    color: #2A2A2A;

}

.features__image {

    max-width: 500px;

    margin: 0 auto;

    padding-top: 110px;

}



.features__image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

  

.features-section  .step-list {

    list-style: none;

    padding-left: 0;

    font-size: 18px;

    line-height: 24px;

}

  

.features-section .step-list li {

    margin-bottom: 1.5rem;

    padding-left: 3rem;

    position: relative;

}

.features-section .step-list li + li {

    margin-top: 70px;

}

.features-section .step-number {

    border-radius: 50%;

    display: inline-block;

    height: 40px;

    width: 40px;

    position: absolute;

    left: 0;

    top: 0;

}

.features-section .step-count {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    font-size: 17px;

    line-height: 22px;

    color: #000000;

}

  

.features-section .step-list {

    margin-top: 80px;

}



.features-section .button {

    background-color: #4E8CC4;

    color: white;

    padding: 10px 30px;

    text-decoration: none;

    border: 1px solid;

    padding: 10px 30px;

    font-size: 16px;

    line-height: 21px;

    border-top-left-radius: 21px;

    border-top-right-radius: 0;

    border-bottom-right-radius: 20px;

    border-bottom-left-radius: 21px;

    margin-bottom: 100px;

    margin-left: 50px;

    min-width: 195px;

    font-weight: 400;

}

@media (max-width: 1020px) {

    .features__image {

        padding-top: 40px;

    }

    .features-section .cell {

        width: 100%;

    }

    .center-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh; /* volle hoogte van scherm */
        text-align: center;
    }
    

}

@media (max-width: 768px) {

    .features-section {

        padding-bottom: 40px;

        background-image: none;

    }

    .features__image {

        padding-bottom: 40px;

        

    }

    .features-section .small__text {

        margin: 0 auto;

        margin-left: initial;

    }

    .features-section .button {

        margin-bottom: 0;

    }

    .features-section .step-list {

        width: 95%;

    }

}

/* Features section styles end */


h3 {
  color: #4e8cc4;
}



/* Image with text section styles start */
.image-with-text-section > .container > .grid-x {
    display: block;
}

.image-with-text-section h2 {

    max-width: 400px;

    padding-bottom: 20px;

}

.image-with-text-section .small-text {

    font-size: 20px;

    line-height: 27px;

    color: var(--color-primary);

}



.image-with-text-section p {

    font-size: 18px;

    line-height: 24px;

    color: #2A2A2A;

}

.image-with-text-section .buttons-container {

    gap: 30px;

    margin-top: 40px;

}

.image-with-text-section .button {

    border: 1px solid;

    padding: 10px 30px;

    font-size: 16px;

    line-height: 21px;

    font-weight: 400;

    min-width: 195px

}

.image-with-text-section .primary {

    background-color: #4E8CC4;

    color: white;

    border-top-left-radius: 20px;

    border-top-right-radius: 0;

    border-bottom-right-radius: 21px;

    border-bottom-left-radius: 20px;

}

.image-with-text-section .secondary {

    background-color: #ffffff;

    color: var(--color-secondary);

    border-top-left-radius: 0;

    border-top-right-radius: 21px;

    border-bottom-right-radius: 21px;

    border-bottom-left-radius: 20px;

}

@media (max-width: 1020px) {

    .image-with-text-section {

        padding: 40px 0;

    }

}

@media (max-width: 768px) {

    .image-with-text-section .buttons-container {

        justify-content: center;

    }

}

@media (min-width: 1021px) {

    .image-with-text__image {

        max-width: 650px;

        margin-top: -70px;

    }

    .image-with-text__image img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        transform: scale(1.2);

    }

}

/* Image with text section styles end */



/* About section style start */

.about-us-section {

    padding-bottom: 80px;

}

.about-image__banner {

    margin: 0 auto;

}

.about-us__info {

    line-height: 24px;

    font-size: 18px;

}

.about-image__banner img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    padding: 60px;

    padding-left: 0;

}

.about-us-section .link {

    color: #313131;

    font-size: 20px;

    line-height: 27px;

    display: flex;

    align-items: center;

    gap: 15px;

}

.about-us-section .small-text {

    font-size: 20px;

    line-height: 27px;

    color: var(--color-primary);

}



.about-us-section h2 {

    padding-bottom: 35px;

}

@media (max-width: 768px) {

    .about-us-section {

        padding-bottom: 30px;

    }

    .about-image__banner img {

        padding: 0 60px;

    }

    .about-image__banner {

        max-width: 100%;

        padding-bottom: 40px;

    }

    .about-us-section .link {

        justify-content: center;

    }

}



/* About section styles end */



/* Schedule Section Style Start */

.schedule-section {

    background-image: url('../images/schedule-main-image.svg');

    background-position: center;

    background-size: cover;

    background-color: #F0F8FD;

    padding: 100px 0;

}

.schedule-section .container,

.schedule-section .schedule-banner {

    height: 100%;

}

.schedule-section h2 {

    padding-bottom: 40px;

    max-width: 560px;

}

.schedule__grid {

    gap: 80px;

}

.schedule__item {

    gap: 20px;

    color: var(--color-paragrapgh);

    font-size: 20px;

    line-height: 27px;

}

@media (max-width: 1150px) {

    .schedule__grid {

        gap: 30px;

    }

}

@media (max-width: 767px) {

    .schedule-section {

        height: 365px;

    }

    .schedule__grid {

        gap: 15px;

        align-items: center;

    }

    .schedule__item {

        font-size: 16px;

    }

    .schedule-section h2 {

        font-size: 30px;

        line-height: 36px;

    }

}



/*Schedule Section Style End*/



/* Footer section Styles */



.footer {

    background-color: #fff;

    padding: 0 0 60px 0;

    color: var(--color-paragrapgh);

}



.footer > .container {

    padding-top: 60px;

}



.footer-logo {

    max-width: 240px;

    margin-bottom: 25px;

}

.footer h2 {

    color: inherit;

    font-size: 24px;

    line-height: 32px;

    margin-bottom: 30px;

}

.footer-icon__grid {

    gap: 20px;

    margin-bottom: 20px;

    font-size: 16px;

}

.footer-icon__grid:last-child {

    margin: 0;

}



.footer-logo img {

    max-width: 80px;

    width: 100%;

}



.footer p {

    font-size: 16px;

    line-height: 21px;

    color: var(--color-paragrapgh);

    margin-bottom: 0;

}





.ftr-links ul {

    padding: 0;

    margin: 0;

    list-style-type: none;

}



.ftr-links li + li {

    margin-top: 28px;

}



.ftr-links a {

    font-size: 16px;

    line-height: 21px;

    color: inherit;

}



.ftr-links a:hover {

    color: var(--color-primary);

}



.copyright {

    text-align: center;

    margin-top: 70px;

}



@media (max-width: 1023px) {

    .footer .cell:nth-child(1) {
        padding-bottom: 50px;
    }
	
	.page-content {
		padding-left: 35px;
		padding-right: 35px;
	}
}



@media (max-width: 767px) {

    .footer {

        padding: 0 0 30px;

    }



    .footer .grid-x {

        gap: 30px;

    }



    .footer .cell:nth-child(3) {

        padding-top: 0;

    }



    .footer-logo {

        margin-bottom: 30px;

        display: inline-block;

    }



    .footer p {

        font-size: 16px;

    }



    .copyright {

        margin-top: 30px;

    }



    .footer-contact {

        padding: 15px;

        font-size: 14px;

    }



    .footer-contact span {

        width: 100px;

        flex: 0 0 100px;

    }



    .ftr-links li + li {

        margin-top: 15px;

    }

    

}

@media (max-width: 640px) {

    .footer-icon__grid {

        justify-content: center;

    }

}

@media (min-width: 1020px) {

    .footer__grid {

        justify-content: space-between;

    }

    .footer-grid__item {

        width: auto !important;

    }

}



/*--- Footer Section Style End ---*/