#kc-infopage .header {
  background-color: white;
  padding: 25px;
}

#kc-infopage .logo {
  width: 18vh;
  max-width: 300px;
  height: auto;
  transition: width 0.3s ease;
}

/* Responsive logo scaling */
@media (max-width: 1200px) {
  #kc-infopage .logo {
    width: 16vh;
  }
}

@media (max-width: 992px) {
  #kc-infopage .logo {
    width: 14vh;
  }
}

@media (max-width: 768px) {
  #kc-infopage .logo {
    width: 12vh;
  }
}

@media (max-width: 576px) {
  #kc-infopage .logo {
    width: 15vh;
    max-width: 280px;
  }
}

#kc-infopage .hero {
    object-fit: contain;
    width: 100vw;
}

#kc-infopage .kc-btn {
    background-color: #2E3034;
    color: rgb(255, 255, 255);
    border-radius: 0;
    border: none;
    padding: 15px;
    text-decoration: none;
    text-align: center;
    font-weight: 600;
}

#kc-infopage .kc-btn-1 {
    border-right: 1px solid #F6F5F8;
}

#kc-infopage .kc-btn-2 {

}

#kc-infopage .kc-btn-3 {
    border-left: 1px solid #F6F5F8;

}


#kc-infopage .kc-wrap {
  display: inline-block;   /* shrink-wrap to the big button */
  max-width: 100%;         /* don't overflow the page on small screens */
}

#kc-infopage .kc-btn-4 {
    display: block;                 /* make it fill the wrapper width */
    background-color: #2E3034;
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 0;
    padding: 10px 25px;
    margin-top: 10px;
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
}

#kc-infopage .kc-btn-5 {
    display: block;
    /* make it fill the wrapper width */
    background-color: #ffffff;
    color: #2E3034;
    text-decoration: none;
    border: none;
    border-radius: 0;
    padding: 10px 25px;
    margin-top: 10px;
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
}

#kc-infopage h2 {
    margin-bottom: 25px;
}

#kc-infopage .kc-btn-6 {
    display: block;
    /* make it fill the wrapper width */
    background-color: #2E3034;
    color: #ffffff;
    text-decoration: none;
    border: none;
    border-radius: 0;
    padding: 10px 25px;
    margin-top: 10px;
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
}

#kc-infopage .kc-btn-7 {
    display: block;
    /* make it fill the wrapper width */
    background-color: #F6F5F8;
    color: black;
    text-decoration: none;
    border: none;
    border-radius: 0;
    padding: 10px 25px;
    margin-top: 15px;
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
}

#kc-infopage .kc-btn-7:hover {
    background-color: #FB7269;
    color: white;
}

#kc-infopage .kc-btn-group {
    display: flex;
    width: 100%;        /* exactly the big button's width */
    gap: 10px;          /* spacing between small buttons */
    margin-top: 10px;
}

#kc-infopage .kc-btn-group .kc-btn-extra {
    flex: 1;                   /* equal widths */
    min-width: 0;              /* allow shrinking, avoid overflow */
    display: block;
    text-align: center;
    background-color: #FB7269;
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 0;
    padding: 5px 25px;
    font-weight: 600;
    box-sizing: border-box;
}


#kc-infopage .kc-btn:hover {
    background-color: #FB7269;
    color: white;

}

#kc-infopage .kc-btn:active {
    color: white;

}



#kc-infopage .section-1 {
    text-align: center;
}

#kc-infopage .left-side-1 {
    text-align: right;
    padding: 75px;
    background-color: #2E3034;
    color: white;
    

}

#kc-infopage .right-side-1 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#kc-infopage .section-2 {
    text-align: center;
}

#kc-infopage .left-side-2 {
    text-align: left;
    padding: 75px;
    background-color: #EF4F53;
    color: white;

}

#kc-infopage .right-side-2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#kc-infopage .section-3 {
    text-align: center;
}

#kc-infopage .left-side-3 {
    text-align: right;
    padding: 75px;
    background-color: white;
    color: black;
    border-left: 3px solid #F6F5F8;

}

#kc-infopage .right-side-3 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


#kc-infopage .section-4, #kc-infopage .section-6, #kc-infopage .section-8 {
    background-color: #F6F5F8;
}

#kc-infopage .spotlight-4 {
    --x: 50%;
    --y: 50%;
    mask-image: radial-gradient(circle 60px at var(--x) var(--y), black 99%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle 100px at var(--x) var(--y), black 99%, transparent 100%);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

#kc-infopage .section-4, #kc-infopage .section-6 {
    padding-top: 100px;
    padding-bottom: 100px;
}

#kc-infopage .section-8 {
    padding-top: 100px;
    padding-bottom: 0;
}

#kc-infopage .spotlight-6 {
    --x: 50%;
    --y: 50%;
    mask-image: radial-gradient(circle 60px at var(--x) var(--y), black 99%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle 100px at var(--x) var(--y), black 99%, transparent 100%);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* Mobile responsive spotlight size */
@media (max-width: 768px) {
    #kc-infopage .spotlight-4,
    #kc-infopage .spotlight-6 {
        mask-image: radial-gradient(circle 30px at var(--x) var(--y), black 99%, transparent 100%);
        -webkit-mask-image: radial-gradient(circle 50px at var(--x) var(--y), black 99%, transparent 100%);
    }
    
    /* Mobile text alignment - make all left-side content left-aligned on mobile */
    #kc-infopage .left-side-1,
    #kc-infopage .left-side-3 {
        text-align: left;
    }
    
    /* Mobile alignment for titles and buttons */
    #kc-infopage .left-side-1 h2,
    #kc-infopage .left-side-3 h2 {
        text-align: left !important;
    }
    

    
    /* Override Bootstrap align-items-end on mobile */
    #kc-infopage .left-side-1,
    #kc-infopage .left-side-3 {
        align-items: flex-start !important;
    }
}

/* Mobile-specific spacing adjustments for narrow phones */
@media (max-width: 576px) {
    /* Reduce padding on all content sections for mobile */
    #kc-infopage .left-side-1,
    #kc-infopage .left-side-2,
    #kc-infopage .left-side-3,
    #kc-infopage .left-side-5,
    #kc-infopage .left-side-6 {
        padding: 50px 30px;
    }
    
    /* Reduce intro section padding */
    #kc-infopage .intro {
        padding: 40px 20px !important;
    }
    
    /* Reduce section padding for spotlight sections */
    #kc-infopage .section-4,
    #kc-infopage .section-6 {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    
    /* Section 8 - no bottom padding on mobile */
    #kc-infopage .section-8 {
        padding-top: 60px;
        padding-bottom: 0;
    }
    
    /* Reduce image container width for better mobile fit */
    #kc-infopage .image-container {
        width: 85% !important;
    }
    
    /* Reduce header padding */
    #kc-infopage .header {
        padding: 20px;
    }
}

#kc-infopage .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

#kc-infopage .section-5 {
    text-align: center;
}

#kc-infopage .left-side-5 {
    text-align: left;
    padding: 75px;
    background-color: #2E3034;
    color: white;


}

#kc-infopage .right-side-5 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#kc-infopage .section-6 {
    text-align: center;
}

#kc-infopage .left-side-6 {
    text-align: right;
    padding: 75px;
    background-color: #EF4F53;
    color: white;


}

#kc-infopage .right-side-6 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#kc-infopage .intro {


    background-color: #F6F5F8;
    padding: 50px;
}

#kc-infopage h1 {
    font-size: 2rem;
    font-weight: 700;
}

#kc-infopage h2 {
    font-size: 1.5rem;
}

#kc-infopage .header {
  background-color: #2E3034;
  padding: 25px;
  text-align: center;
}

/* Link styles for better readability */
#kc-infopage .kc-link {
  color: #FB7269;
  text-decoration: underline;
  transition: color 0.3s ease;
}

#kc-infopage .kc-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Ensure links are visible on dark backgrounds */
#kc-infopage .left-side-1 .kc-link,
#kc-infopage .left-side-2 .kc-link,
#kc-infopage .left-side-5 .kc-link,
#kc-infopage .left-side-6 .kc-link {
  color: #FB7269;
}

#kc-infopage .left-side-1 .kc-link:hover,
#kc-infopage .left-side-2 .kc-link:hover,
#kc-infopage .left-side-5 .kc-link:hover,
#kc-infopage .left-side-6 .kc-link:hover {
  color: #ffffff;
}


























































/* MENU SETTINGS */

#kc-infopage .navBar,
#kc-infopage .navBar .navItem,
#kc-infopage .navBar .navItem .navDropdownButton {
    background-color: #2E3034;
    color: white;
    font-size: 16px;
}

#kc-infopage .navBar .navItem:hover,
#kc-infopage .navBar .navItem:hover .navDropdownButton,
#kc-infopage .navBar .navActive .navDropdownButton {
    background-color: white;
    color: black;
}

#kc-infopage .navBar .navDropdownContent a {
    background-color: white;
    color: #7d7d7d;
}

#kc-infopage .navBar .navDropdownContent a:hover {
    background-color: #0D77FE;
    color: white;
}

@media screen and (min-width: 767px) {
    #kc-infopage .navBar .navCurrentPage {
        background-color: #FB7269;
        pointer-events: none;
    }
}

@media screen and (min-width: 767px) and (max-width: 1300px) {
    #kc-infopage .navBar {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-auto-rows: 54px;
        grid-gap: 2px;
        background-color: #F6F5F8;
    }
}

@media screen and (min-width: 1300px) {
    #kc-infopage .navBar {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-auto-rows: 54px;
        grid-gap: 2px;
        background-color: #F6F5F8;
    }

    #kc-infopage .navBar .navDropdownContent a {
        min-width: 184px;
    }
}

/* ALGEMENE MENU CSS */

#kc-infopage .navBar {
    overflow: hidden;
}

                                                                                    #kc-infopage .navBar .navItem {
    float: left;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s;
}

#kc-infopage .navBar .navItem:hover {
    transition: background-color 0.3s;
}

#kc-infopage .navBar .navDropdownButton {
    border: none;
    outline: none;
    color: #7d7d7d;
    background-color: inherit;
    font-family: inherit;
    width: 100%;
    transition: background-color 0.3s;
}

#kc-infopage .navBar .navDropdownContent {
    display: none;
    position: absolute;
    background-color: #f89828;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

#kc-infopage .navBar .navDropdownContent a {
    float: none;
    padding: 15px;
    text-decoration: none;
    display: block;
    text-align: left;
    transition: background-color 0.3s;
}

#kc-infopage .navBar .navIcon {
    display: none;
}

#kc-infopage .navBar .navDropdown.navActive .navDropdownContent {
    display: block;
}

@media screen and (max-width: 767px) {

    #kc-infopage .navBar .navItem:not(:first-child):not(:last-child),
    #kc-infopage .navBar .navDropdownButton {
        display: none;
    }

    #kc-infopage .navBar .navItem {
        padding: 15px;
    }

    #kc-infopage .navBar.navMenuOpen {
        position: relative;
    }

    #kc-infopage .navBar .navIcon {
        float: right;
        display: block;
    }

    #kc-infopage .navBar.navMenuOpen .navIcon {
        position: absolute;
        right: 0;
        top: 0;
    }

    #kc-infopage .navBar.navMenuOpen .navItem,
    #kc-infopage .navBar.navMenuOpen .navDropdownButton {
        float: none;
        display: block !important;
        text-align: left;
    }

    #kc-infopage .navBar.navMenuOpen .navDropdown {
        float: none;
    }

    #kc-infopage .navBar.navMenuOpen .navDropdownButton {
        display: block;
        width: 100%;
        text-align: left;
        padding: 0;
    }

    #kc-infopage .navBar.navMenuOpen .navDropdownContent {
        position: relative;
        margin-top: 15px;
    }
}

@media screen and (min-width: 767px) {
    #kc-infopage .navBar a {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #kc-infopage .navBar .navDropdown a {
        justify-content: start;
    }

    #kc-infopage .navBar .navDropdownButton {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
    }

    #kc-infopage .navBar .navIcon {
        display: none !important;
    }

    #kc-infopage .navBar .navDropdownContent a {
        padding: 15px !important;
    }
}