/*
 * Original stylesheet provided by the designer:
 *  - One change applied: '%s#assets/#/assets/#' to fix the image paths.
 *  - Customizations go in 'overrides.css' to ensure maintainability.
 */

:root {
    --primary-teal: #0C4843;
    --dark-teal: #083332;
    --light-teal-bg-rgb: 134, 164, 161;
    --light-teal: rgb(var(--light-teal-bg-rgb));
    --white: #ffffff;
}

* { 
    font-family: roboto, sans-serif; 
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Fonts */
body { font-family: 'Roboto', sans-serif; color: var(--dark-teal); overflow-x: hidden; }
h1, h2, h3, H4 { font-family: 'Righteous', cursive; }
h1{ font-size: 56px;}
h2{ font-size: 40px;}
h3, .gd-card-header{ font-size: 20px;}
h4{ font-size: 18px;}
.righteous { font-family: 'Righteous', cursive; }
a{ color: inherit; text-decoration: none;}

/* Backgrounds */
.bg-dark-teal { background-color: var(--dark-teal); }
.bg-primary-teal { background-color: var(--primary-teal); }
.bg-light-teal { background-color: var(--light-teal); }
.bg-string {
    position: relative; 
    overflow: hidden;   
    z-index: 1;
}
.bg-string::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    
    width: 180%; 
    height: 180%; 
    
    background-image: url('/assets/string_white-trans.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    
    transform: translate(-50%, -50%) rotate(-30deg); 
    z-index: -1;
}

.text-primary-teal { color: var(--primary-teal); }
.py-6{ padding: 5rem 0 5rem 0 !important;}
.my-6{margin: 5rem auto !important}


/* Buttons */
.btn-gd-primary { background-color: var(--primary-teal); color: var(--white); border: 1px solid var(--primary-teal); }
.btn-gd-primary:hover { background-color: none; color: var(--primary-teal); border: 1px solid var(--primary-teal); }
.btn-gd-secondary { background-color: var(--white); color: var(--primary-teal); border: 1px solid var(--white); }
.btn-gd-secondary:hover { background-color: none; color: var(--white); border: 1px solid var(--white); }
.btn-gd-primary-outline { background-color: none; color: var(--primary-teal); border: 1px solid var(--primary-teal); }
.btn-gd-primary-outline:hover { background-color: var(--primary-teal); color: var(--white); border: 1px solid var(--primary-teal); }
.btn-gd-secondary-outline { background-color: none; color: var(--white); border: 1px solid var(--white); }
.btn-gd-secondary-outline:hover { background-color: var(--white); color: var(--primary-teal); border: 1px solid var(--white); }

/* Cards */
.gd-card { border-radius: 12px; height: 100%; border: 1px solid var(--primary-teal); overflow: hidden; }
.gd-card-header { padding: 15px 20px; font-family: 'Righteous'; font-size: 1.2rem; }
.gd-card.dark { background-color: var(--primary-teal); color: var(--white); }
.gd-card.light { background-color: rgba(var(--light-teal-bg-rgb), 0.5); color: var(--primary-teal); }
.gd-card.card-white { background-color: var(--white); color: var(--primary-teal); }
.gd-card.dark .gd-card-header { border-bottom: 1px solid var(--white); }
.gd-card.light .gd-card-header { border-bottom: 1px solid var(--primary-teal); }
.gd-card.card-white .gd-card-header { border-bottom: none; }

/* min-height classes */
.min-height-1{ min-height: 50px;}
.min-height-2{ min-height: 75px;}
.min-height-3{ min-height: 100px;}
.min-height-4{ min-height: 150px;}
.min-height-5{ min-height: 200px;}
.min-height-6{ min-height: 300px;}

@media (max-width: 990px) {
    .min-height-1{ min-height: 25px;}
    .min-height-2{ min-height: 50px;}
    .min-height-3{ min-height: 75px;}
    .min-height-4{ min-height: 100px;}
    .min-height-5{ min-height: 150px;}
    .min-height-6{ min-height: 200px;}
}

/*Linkedin icoon voor contact en footer*/
.gd-social-icon {
    width: 40px; 
    height: 40px;
    object-fit: contain;
}

/* NAV */
.active{ color: var(--primary-teal)}

.dropdown-menu .dropdown-item {
    transition: all 0.2s ease-in-out;
    padding: 0.5rem 1rem;
}

.dropdown-menu .dropdown-item:hover, 
.dropdown-menu .dropdown-item:focus {
    background-color: var(--white) !important;
    color: var(--primary-teal) !important;
    opacity: 1;
}
.dropdown-toggle::after {vertical-align: middle;}

@media (max-width: 991.98px) {
    .navbar-nav {
        width: 100%;
    }
    .dropdown-menu {
        background-color: var(--light-teal) !important;
        border: none;
        text-align: center; 
    }
    .dropdown-toggle{
        justify-self: center;
    }
    .dropdown-item {
        display: inline-block;
        width: auto;
        margin: 0 auto;
    }
}


/* Hero */
.hero-home{ background: linear-gradient(rgba(12,74,72,0.8), rgba(12,74,72,0.8)), url('/assets/hero-home-desktop.jpg');}
.hero-platform{ background: linear-gradient(rgba(12,74,72,0.8), rgba(12,74,72,0.8)), url('/assets/robot.jpg');}
.hero-solutions{ background: linear-gradient(rgba(12,74,72,0.8), rgba(12,74,72,0.8)), url('/assets/33250f427cd12a825e58138465e7a30a98a4ea59.jpg');}
.hero-resources{ background: linear-gradient(rgba(12,74,72,0.8), rgba(12,74,72,0.8)), url('/assets/33250f427cd12a825e58138465e7a30a98a4ea59.jpg');}
.hero-about-us{ background: linear-gradient(rgba(12,74,72,0.8), rgba(12,74,72,0.8)), url('/assets/33250f427cd12a825e58138465e7a30a98a4ea59.jpg');}
.hero-team{ background: linear-gradient(rgba(12,74,72,0.8), rgba(12,74,72,0.8)), url('/assets/46a39e5e3f68a71629e1d1131ead20a7b9274ac0.jpg'); min-height: 800px;}
.hero-section {
    background-size: cover;
    padding-top: 100px;
}
@media (max-width: 768px) {
    .hero-section { padding: 60px 0; }
}

/* De 'logo-track' */
.logo-track {
    display: flex;
    width: max-content; 
    animation: scroll-left 40s linear infinite;
}

.logo-item {
    flex: 0 0 auto;
    width: 220px; 
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-item img {
    max-width: 100%;
    max-height: 50px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.logo-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}


/* Footer met toggle*/
.footer-toggle-btn {transition: transform 0.3s ease;}
.footer-toggle-btn[aria-expanded="true"] .transition-icon {transform: rotate(180deg);}

.transition-icon {transition: transform 0.3s ease;}

.hover-opacity-100:hover {opacity: 1 !important;}

body {display: flex; flex-direction: column; min-height: 100vh;}

footer-component {margin-top: auto;}

/*Our story - Core values*/
.core-values{background-color: var(--primary-teal); color: var(--white); border: 1px solid var(--primary-teal); border-radius: 12px; }
.core-values h3{ margin-top: 0.5rem;}

/*Contact form dropdown opmaak*/
.form-control-gd {
    border: 1px solid var(--primary-teal);
    border-radius: 6px !important;
    padding: 0.6rem 0.75rem;
    background-color: var(--white);
    color: var(--dark-teal);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

button.form-control-gd.dropdown-toggle {
    box-shadow: none;
    text-transform: none;
    font-weight: 400;
}

.form-control-gd:focus, 
.dropdown.show .form-control-gd {
    border-color: var(--primary-teal) !important;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(12, 72, 67, 0.1) !important;
    color: var(--primary-teal);
}

@media (max-width: 991.98px) {
    .dropdown .dropdown-menu.w-100 {
        text-align: left;
    }
}

/*Card carousel*/
.gd-carousel-wrapper {
    overflow: hidden;
    cursor: grab;
    user-select: none; 
}

.gd-carousel-wrapper:active {
    cursor: grabbing;
}

.gd-carousel-content {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 24px;
    -webkit-overflow-scrolling: touch; 
    
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gd-carousel-content::-webkit-scrollbar {
    display: none;
}

.gd-carousel-item {
    scroll-snap-align: start;
    flex: 0 0 auto; 
}

.gd-carousel-item img {
    pointer-events: none; 
    -webkit-user-drag: none;
}

.custom-nav {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: var(--primary-teal) !important;
    border: 2px solid var(--white);
    border-radius: 50%;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.custom-nav:hover {
    background-color: var(--dark-teal) !important;
}


@media (max-width: 991.98px) {
    .carousel-control-prev, 
    .carousel-control-next {
        display: none;
    }
}

/*Testimonials slider*/
.testimonial-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
}

.testimonial-track {
    display: flex;
    width: max-content;
    animation: scroll-left 50s linear infinite;
}    

.testimonial-track:hover {
    animation-play-state: paused;
}

.testimonial-card {
    flex: 0 0 auto;
    width: 450px; 
    margin: 0 20px;
    padding: 30px;
    color: var(--white);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 768px) {
    .testimonial-card {
        width: 300px;
        padding: 20px;
    }
}

/* FAQ */
.accordion-button {
    box-shadow: none;
}

.accordion-item:nth-child(odd) .accordion-button,
.accordion-item:nth-child(odd) .accordion-button:not(.collapsed) {
    background-color: var(--primary-teal);
    color: var(--white);
    border: 1px solid var(--white);

}

.accordion-item:nth-child(even) .accordion-button,
.accordion-item:nth-child(even) .accordion-button:not(.collapsed) {
    background-color: var(--light-teal) !important;
    color: var(--white);
    border: 1px solid var(--white);
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    filter: none;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.1);
}

.accordion-item {
    border: none;
}

.accordion-body {
    padding: 2rem 1.5rem;
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
}

/*Tabel Pricing Credits*/
.gd-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    background: none;
}

.gd-table thead th {
    font-family: 'Righteous', cursive;
    color: var(--primary-teal);
    border-bottom: 2px solid var(--primary-teal);
    text-transform: uppercase;
    font-size: 0.9rem;
    background: none;
}

.gd-table tbody td {
    color: var(--dark-teal);
    font-size: 1rem;
    vertical-align: middle;
    background: none;
}