/**
 * Custom theme CSS for Power Pages.
 * This file uses dynamic CSS variables for colors while retaining all layout and responsive styles.
 */


 
 @font-face {
    font-family: 'Algerian';
    src: url('/webfiles/Algerian2.woff2') format('woff2'),
         url('/webfiles/my-custom-font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TechnoGymBold';
    src: url('/webfiles/AcuminPro-Bold.otf') format('otf');      
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TechnoGymLight';
    src: url('/webfiles/AcuminPro-Light.otf') format('otf');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Manrope-Light';
    src: url('/webfiles/Manrope-Light.otf') format('ttf');
    font-weight: normal;
    font-style: normal;
}






/*primary forground, primary background, secondary.. */
:root {
    /* Dynamic color variables */
    --bodyBackground:!important;
    --bodyForeground:!important;
    --headerBackground: !important;
    --headerForeground: !important;
    --footerBackground: !important;
    --footerForeground: !important;
    --ButtonBackground: !important;
    --ButtonForeground: !important;
}

/*

body[data-brand="A10"],
body[data-brand="A12"] {
    --portalThemeColor1: #000000 !important;
    --portalThemeColor2: #ece3e3 !important;
    --portalThemeOnColor1: #FFFFFF  !important;
    --portalThemeOnColor2: #000000 !important;
    --headerBackground: #000000 !important;
    --headerForeground: #ece3e3 !important;
    --footerBackground: #000000 !important;
    --footerForeground: #FFFFFF  !important; 
    font-family: 'Algerian', sans-serif !important;
    
}
*/

body[data-brand="A01"] {
    --bodyBackground: #eae4de !important;
    --bodyForeground: #293251 !important;
    --headerBackground: #f01e37  !important;
    --headerForeground: #ffffff !important;
    --footerBackground: #293251 !important;
    --footerForeground: #eae4de !important;
    --ButtonBackground: #293251 !important;
    --ButtonForeground: #eae4de !important;
    font-family: 'Manrope-Light'!important;
}

body[data-brand="A02"],
body[data-brand="A03"],
body[data-brand="A04"] {
    --bodyBackground: #fffdfc !important;
    --bodyForeground: #2d333d !important;
    --headerBackground: #fffdfc  !important;
    --headerForeground: #2d333d !important;
    --footerBackground: #2d333d !important;
    --footerForeground: #fffdfc !important;
    --ButtonBackground: #2d333d !important;
    --ButtonForeground: #fffdfc !important;
    font-family: 'Metropolis'!important;
}

body[data-brand="A09"] {
    --bodyForeground: #000000 !important;
    --bodyBackground: #ffffff !important;
    --headerBackground: #F4E116  !important;
    --headerForeground: #000000 !important;
    --footerBackground: #000000 !important;
    --footerForeground: #FFFFFF  !important;
    --ButtonBackground: #808080 !important;
    --ButtonForeground: #ffffff !important;
    font-family: 'TechnoGymLight'!important;
    
}

body[data-brand="A10"],
body[data-brand="A12"] {
    --bodyBackground: #ffffff !important;
    --bodyForeground: #000000 !important;
    --headerBackground: #788c6a  !important;
    --headerForeground: #ffffff !important;
    --footerBackground: #6d6e71 !important;
    --footerForeground: #000000 !important;
    --ButtonBackground: #d7cfcd !important;
    --ButtonForeground: #000000 !important;
    font-family: 'Clother-Regular'!important;
}

body[data-brand="A13"],
body[data-brand="A14"],
body[data-brand="A15"] {
    --bodyBackground: #fcfcfc !important;
    --bodyForeground: #000000 !important;
    --headerBackground: #fcfcfc  !important;
    --headerForeground: #00515e !important;
    --footerBackground: #00515e !important;
    --footerForeground: #fcfcfc !important;
    --ButtonBackground: #00515e !important;
    --ButtonForeground: #fcfcfc !important;
    font-family: 'Raleway'!important;
}

body[data-brand="default"] {
    --bodyBackground: #ffffff !important;
    --headerBackground: #788c6a  !important;
    --headerForeground: #000000 !important;
    --footerBackground: #6d6e71 !important;
    --ButtonColour: #d7cfcd !important;
    --footerForeground: #000000 !important;
    font-family: 'Clother-Regular'!important;
}


/* General components */
[data-component-theme="portalThemeColor1"] {
    background-color: var(--portalThemeColor1)!important;
    color: var(--portalThemeOnColor1)!important;
}

[data-component-theme="portalThemeColor2"] {
    background-color: var(--portalThemeColor2)!important;
    color: var(--portalThemeOnColor2)!important;
}

/* Retain padding, spacing, and layout */
html, body {
    background-color: var(--bodyBackground)!important;
    /*font-family: var(--), sans-serif!important;*/
    display: flex !important;
    flex-direction: column !important;
    color: var(--bodyForeground)!important;
    position:relative!important;
    height: 100%!important;
    overflow-x: hidden;
    
}

.seperator{
    background-color: var(--bodyBackground);
}

footer {
    
    font-size: 16px !important;  /* Increased size */
    font-family: Arial, sans-serif!important;
    font-weight: 400!important;
    padding: top 10px!important;
   /* margin-top: auto !important;  */
    width: 100%!important;
    text-align: center !important; /* Centers text */
    
}

footer .footer-bottom {
    background-color: var(--footerBackground)!important;
    min-height: 10%!important;
}



/* Flexbox layouts */
.ppFlexContainer {
    display: flex!important;
    flex-wrap: wrap!important;
    flex-grow: 1!important;
    flex-shrink: 1!important;
    flex-basis: auto!important;
    flex-direction: row!important;
    justify-content: flex-start!important;
    align-items: flex-start!important;
    gap: 8px!important;
}

/* Responsive containers */

 /* 
.col-lg-6 > p{
  color: var(--portalThemeOnColor2) !important; 
}
*/


.sectionBlockLayout .container-fluid {
    padding-left: 0!important;
    padding-right: 0!important;
}

/* 
.btn-primary {
    color: var(--portalThemeOnColor1)!important;
    background-color: var(--portalThemeColor4)!important;
    border-color: var(--portalThemeColor4)!important;
    padding: 6px 20px!important;
    font-family: Arial, sans-serif!important;
    font-weight: 600!important;
    font-size: 14px!important;
    border-radius: 2px!important;
    width: fit-content!important;
}



.btn-primary:hover {
    color: var(--portalThemeOnColor1)!important;
    background-color: var(--portalThemeColor9)!important;
    border-color: var(--portalThemeColor9)!important;
}
*/

/* Navbar, this is responsible for the colouring*/
.navbar-dark {
    background-color: var(--headerBackground)!important;
    color: var(--headerForeground)!important;
}


/*responsible for the link text colour and padding */
.navbar-dark .nav-link {
    color: var(--headerForeground)!important;
    padding: 10px 20px !important;
    text-align: center!important;
     
}
/* there was a little padding around the nav links */
.ps-3 {
   padding-left: 0px !important;
}

.navbar-dark .nav-link:hover {
    color: var(--portalThemeOnColor2)!important;
    background-color: #666666!important;
    

}


/* Breadcrumb 
.breadcrumb {
    background-color: transparent!important;
    padding: 10px!important;
}

.breadcrumb > li a {
    color: var(--portalThemeColor4)!important;
}
*/


/* Typography  only responsible for the heading*/
h1, h4, h5, h6 {
    color: var(--headerForeground)!important;
    font-family: Arial, sans-serif!important;
    font-weight: 400!important;
    margin: 0!important;
}



.footer > p {
    color: var(--footerForeground)!important;
}

#submit, #customFileButton, .btn{
    background-color:var(--ButtonBackground)!important;
    color:var(--ButtonForeground)!important;
}

/* Table controlls, no styles being applied so far
.table {
    background-color: var(--portalThemeColor7)!important;
    color: var(--portalThemeOnColor1)!important;
    width: 100%!important;
    border-collapse: collapse!important;
}
.table-hover > tbody > tr:hover {
    background-color: var(--portalThemeColor3)!important;
}
*/


/* Form Controls 
.form-control {
    background-color: var(--portalThemeColor7) !important;
    color: var(--portalThemeOnColor1) !important;
    padding: 10px!important;
    border-radius: 4px!important;
}
*/
/* Responsive grid system */




@media (max-width: 576px) {
    /* Styles for small smartphones like the Galaxy S9+ */
    #brand-title {
        
        text-align: center !important;
        max-width: 100% !important;
        margin-top: 10px;
    }
    .site-logo {
        width: auto;
        height: auto;
        
        
    }
    .footer  p{
        font-size: 14px !important;
        text-align: center !important;/* Slightly smaller for mobile */
    }

    .navbar-toggler {
        width: 35px !important;  /* Set a smaller width */
        height: 35px !important; /* Set a smaller height */
        padding: 5px !important; /* Reduce padding inside the button */
        border: none !important; /* Optional: remove border */
    }
    
    /* Reduce the size of the hamburger icon inside the button */
    .navbar-toggler-icon {
        width: 20px !important; /* Make the icon smaller */
        height: 20px !important;
    }
    .footer .row {
        flex-direction: column;
        text-align: center !important;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .footer .col-md-6 {
        text-align: center !important;
    }
    .navbar-brand {
        width: 100%;
        display: flex;
        flex-direction: column; /* Stack elements */
        align-items: center; /* Center elements */
        text-align: center; /* Ensure title is centered */
        justify-content: center;
    }
    .container, .container-fluid {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .navbar {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    .navbar-collapse {
        justify-content: center;
        width: 100%;
    }
    
}


@media  (max-width: 769px) {
    #brand-logo {
        max-width: 150px !important; /* Resize logo for smaller screens */
        height: auto !important;
        margin-bottom: 10px!important; /* Ensure spacing between logo and title */
    }
    .form-container{
        padding-right: calc(var(--bs-gutter-x)* .5)!important;
        padding-left: calc(var(--bs-gutter-x)* .5)!important;
    }
    #navButton {
        align-self: flex-end;   /* Make sure it aligns to the end vertically */
        /* Optional: tweak size/appearance */
      }
      .seperator{
        display: none;
    }
   
    
}
@media (min-width: 576px) and (max-width: 768px) {
    .row.sectionBlockLayout > .container, .row.sectionBlockLayout > .container-sm {
        max-width: 540px !important;
    }
    #brand-logo {
        max-width: 150px !important; /* Resize logo for smaller screens */
        height: auto !important;
        margin-bottom: 10px; /* Ensure spacing between logo and title */
    }

    #brand-title {
      
        text-align: center !important;
        max-width: 100% !important;
        margin-top: 10px; /* Adds space between logo and title */
    }

    /* Fix Footer Layout */
    .footer p {
        font-size: 14px !important;
        text-align: center !important; /* Centers all text */
    }

    .footer .row {
        display: flex !important;
        flex-direction: column !important; /* Stack items vertically */
        align-items: center !important; /* Centers items */
        text-align: center !important; /* Centers text */
    }

    .footer .col-md-6 {
        width: 100% !important; /* Make each section full width */
        text-align: center !important; /* Centers text */
        /*margin-bottom: 10px !important;  Add spacing between sections */
    }
    .navbar-brand {
        width: 100%;
        display: flex;
        flex-direction: column; /* Stack elements */
        align-items: center; /* Center elements */
        text-align: center; /* Ensure title is centered */
        justify-content: center;
    }
    .container, .container-fluid {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .navbar {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    .navbar-collapse {
        justify-content: center;
        width: 100%;
    }

}
@media (min-width: 768px)  {
    .row.sectionBlockLayout > .container, .row.sectionBlockLayout > .container-md, .row.sectionBlockLayout > .container-sm {
        max-width: 720px!important;
    }
    #copyright-text{
        margin-bottom: 0px!important;
        word-break: normal!important;
    }
    
    
    .ppFlexContainer {
        flex-basis: 0%!important;
    }
    .footer .row {
        display: flex!important;
        justify-content: space-between!important;
        align-items: center!important;
    }

    #copyright-content {
        text-align: left !important;
        word-wrap: break-word!important;
        padding-left: 0%!important;
    }

    #contact-content {
        text-align: center !important;
        max-width: 50%!important; /* Ensures right content doesn't shrink */
        width: fit-content!important;
        padding-right: 0%!important;
    }
    .contact-details {
        display: inline-block;
        max-width: 100%;
        width: fit-content;
    }
    
    #brand-title {
        text-align: center!important;
    }
    .navbar-brand {
        height: 120px!important;
    }
    
   
}


@media (min-width: 992px) {
    .row.sectionBlockLayout > .container, .row.sectionBlockLayout > .container-lg, .row.sectionBlockLayout > .container-md, .row.sectionBlockLayout > .container-sm {
        max-width: 960px!important;
    }
    
}



@media (min-width: 1200px) {
    .row.sectionBlockLayout > .container, .row.sectionBlockLayout > .container-lg, .row.sectionBlockLayout > .container-md, .row.sectionBlockLayout > .container-sm, .row.sectionBlockLayout > .container-xl {
        max-width: 1140px!important;
    }
    
}

@media (min-width: 1400px) {
    .row.sectionBlockLayout > .container, .row.sectionBlockLayout > .container-lg, .row.sectionBlockLayout > .container-md, .row.sectionBlockLayout > .container-sm, .row.sectionBlockLayout > .container-xl, .row.sectionBlockLayout > .container-xxl {
        max-width: 1320px!important;
    }
}


#contactInfo{
    margin-bottom: 0px!important;
}

/* Forms and inputs 
input {
    background-color: var(--portalThemeColor7)!important;
    padding: 10px!important;
    border-radius: 4px!important;
}
*/
/* Placeholder text 
::placeholder {
    color: var(--portalThemeOnColor3) !important;
}
*/



/* Bootstrap overrides 
.dropdown-menu {
    background-color: var(--portalThemeColor4)!important;
    color: var(--portalThemeOnColor1)!important;
    padding: 10px!important;
}
*/

/* Card components 
.card-body {
    background-color: var(--portalThemeColor7)!important;
    color: var(--portalThemeOnColor1)!important;
    padding: 15px!important;
}

.card-header {
    background-color: var(--portalThemeColor2)!important;
    color: var(--portalThemeOnColor1)!important;
    padding: 10px!important;
}
*/
/*
.wrapper-body{
    flex: 1!important; /* This allows it to take up all available space 
    display: flex!important;
    flex-direction: column!important;
    min-height: calc(100vh - 100px)!important; /* Adjust 100px if needed based on the height of the header/footer 
    padding-bottom: 20px !important;
    text-align: center !important;
   }
*/
   /*
html, body {
    height: 100%!important;
    margin: 0!important;
    padding: 0!important;
    display: flex!important;
    flex-direction: column!important;
}
*/


#mainContent.wrapper-body {
    flex: 1!important; /* Allows it to grow and take available space */
    display: flex!important;
    flex-direction: column!important;
    justify-content: space-between!important; /* Pushes content up and footer down */
    /*min-height: 80vh!important; /* Ensures it takes the full viewport height */
    padding-bottom: 0 !important;
}


/*
h2 {
    color: var(--portalThemeOnColor2) !important;
}
*/

.wrapper-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    /*min-height: calc(100vh - 100px) !important;*/
    padding-bottom: 20px !important;
    text-align: center !important;
}


.navbar-expand-xl{
    width: 100%;
}

#navButton{
    margin-right: 0px!important;
}

.navbar-brand{
    width: 100% !important;
    padding-left: 5%!important;
    padding-right: 5%!important;
    margin-right: 0px!important;
    padding-bottom: 0px!important;
    padding-top: 0px!important;
    

}

.navbar-nav .nav-item {
    
    text-align: center !important;
    font-size: 10px!important;
}

#brand-title {
   
    text-align: center!important;
    font-size: clamp(1.2rem, 4vw + 0.5rem, 36px) !important;
    color: var(--headerForeground);
    font-weight: bold!important;
    white-space: normal !important;
}


/*
#faqSearch {
    color: var(--portalThemeOnColor2)!important;
}
*/

#copyright-content{
    margin-left: 10px !important;
    width:auto !important;
}
.nav-link{
    margin-right: 5%!important;
    margin-left: 5%!important
}


.footer .container {
    max-width: 95%!important; /* Adjust to match accordion width */
    margin: 0 auto!important; /* Centers content */
    padding-left: 2.5%!important;
    padding-right: 2.5%!important;
}

.footer .col-md-6.text-end {
    display: flex!important;
    justify-content: flex-end!important; /* Aligns to the right within 90% width */
    max-width: 90%!important; /* Matches accordion width */
}

.footer .row {
    display: flex!important;
    justify-content: space-between!important;
    align-items: center!important;
}


.site-logo{
    max-width: 200px!important;
    height: auto!important; 
    max-height: 100px!important; 
    object-fit:contain!important;
    margin-right: 0px !important;
}



.container.columnBlockLayout {
    display: none !important;
}

.pageTitle {
    margin-top: 50px !important; /* Increases space from the navigation */
    margin-bottom: 50px !important; /* Keeps some space before the accordion */
    padding-top: 10px !important; /* Adds extra padding if needed */
    text-align: center !important; /* Ensures title stays centered */
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: clamp(25px, 2.5vw, 32px);
    font-weight: 400;
    

}



footer .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


.nav-divider {
    display: block!important; /* hidden by default */
    height: 2px!important;
    width: 100%!important;
    background-color: #3b3b3b!important;
    margin-top: 10px!important;
    margin-bottom: 5px!important;
}


#navbar.show + .nav-divider {
    display: block;
  }

#description{
    resize: none;
}