/*
 CSS shortcuts
    # = id
    . = class
    Accessing the color variable = var(--main-dark-red) !important;

*/

/* Sets the primary colours for use throughout the css document */
/* use background-color: var(--main-grey); to reference it */
:root {
    --main-dark-grey: #303841;
    --main-light-grey: #3A4750;
    --main-dark-red: #D72323;
    --main-white-grey: #EEEEEE;
    --main-black: #000000;
    --main-white: #f1f1f1;
}


/* BOOTSTRAP CSS */


/* MAIN CSS ALPHABETICAL ORDER*/

/* A */


/* B */

/* -------------------------------------------------------------------*/
/* -----------------          BODY          --------------------------*/
/* -------------------------------------------------------------------*/
body {
    font-family: 'Poppins', sans-serif !important;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}


/* C */
/* D */
/* E */


/* F */

#footer-container {
    background-color: var(--main-dark-grey);
    color: var(--main-white-grey);
}

#copywrite-container {
    background-color: var(--main-dark-red);
    color: var(--main-white-grey);
}


/* G */

/* -------------------------------------------------------------------*/
/* --------------          GOTO TOP BUTTON         -------------------*/
/* -------------------------------------------------------------------*/

#gotoTopBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 5px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: var(--main-dark-red); /* Set a background color */
    color: var(--main-white-grey); /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    /*border-radius: 10px; !* Rounded corners *!*/
    border-radius: 90px 90px 5px 5px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
}

#gotoTopBtn:hover {
    background-color: var(--main-dark-grey); /* Add a dark-grey background on hover */
}


/* H */

/* -------------------------------------------------------------------*/
/* ------------------          HEADER         ------------------------*/
/* -------------------------------------------------------------------*/

#about-subheader {
    background-color: var(--main-white-grey);
    color: var(--main-dark-red);
}

h1 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 2.5rem;
}

h2 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 2rem;
}

h3 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.75rem;
}

h4 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.5rem;
}

h5 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.25rem;
}

h6 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1rem;
}

/* I */
/* J */
/* K */
/* L */
/* M */
/* N */

/* -------------------------------------------------------------------*/
/* ------------------          NAVBAR         ------------------------*/
/* -------------------------------------------------------------------*/

.navbar-custom {
    font-family: 'Poppins', sans-serif !important;
    /*background-color: var(--main-dark-grey) !important;*/
    background-color: white !important;
    font-size: large;
    font-weight: bold;
}

.navbar-custom .navbar-nav .nav-link:focus,
.navbar-custom .navbar-nav .nav-link:hover {
    color: var(--main-dark-red);
}

.navbar-custom .navbar-nav .nav-link {
    color: var(--main-dark-grey);
}

/* Change the text size of the navbar at the SM Break-Point */
@media (max-width: 576px)  {
    .navbar-custom {
        font-size: small;
    }
}

/* Change the text size of the navbar at the MD Break-Point */
@media (max-width: 768px)  {
    .navbar-custom {
        font-size: large;
    }
}

/* Change the text size of the navbar at the LG Break-Point */
@media (max-width: 992px)  {
    .navbar-custom {
        font-size: large;
    }
}

/* Transition effects for the navbar brand */

/*.navbar-custom .navbar-brand:focus,*/
/*.navbar-custom .navbar-brand:hover {*/
/*    color: #0c4128;*/
/*    background-color: #0b5ed7;*/
/*}*/

/* Transition effects for the navbar links*/

/*.navbar-custom .navbar-nav .nav-link:focus,*/
/*.navbar-custom .navbar-nav .nav-link:hover {*/
/*    color: #fff;*/
/*    background-color: #0b5ed7;*/
/*}*/

/* O */
/* P */

/* -------------------------------------------------------------------*/
/* ----------------          Paragraphs         ----------------------*/
/* -------------------------------------------------------------------*/

p {
    font-family: 'Poppins', sans-serif !important;
}

/* Q */
/* R */
/* S */

/* T */

/* -------------------------------------------------------------------*/
/* ---------------------          TOP BAR         --------------------*/
/* -------------------------------------------------------------------*/

/* ----------------          Top-bar container         ---------------*/
.top-bar {
    background-color: var(--main-dark-grey);
    color: var(--main-white-grey);
    width: 100%;
}

/* ----------------          Business Details         ----------------*/
.details-icons {
    color: var(--main-white-grey);
    font-size: large;
}

.details-text {
    color: var(--main-white-grey);
    font-size: small;
}

a.phone-details:hover{
    /*color: var(--main-white-grey);*/
    color: var(--main-dark-red);
    font-size: small;
}

.location-details:hover {
    color: var(--main-dark-red);
    font-size: small;
}

/* ------------------          Social Links         ------------------*/
.social-icons {
    color: var(--main-white-grey);
    font-size: large;
}




/* U */
/* V */
/* W */
/* X */
/* Y */
/* Z */


/* -------------------------------------------------------------------*/
/* -----------     KNOWLEDGE CENTRE — PAGE HEADING      --------------*/
/* -------------------------------------------------------------------*/

.storage-agreement-header {
    font-weight: bolder;
    color: var(--main-dark-grey);
}


/* -------------------------------------------------------------------*/
/* -----------     KNOWLEDGE CENTRE — PANE ANIMATION    --------------*/
/* -------------------------------------------------------------------*/

@keyframes kc-fade-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* -------------------------------------------------------------------*/
/* -----------     KNOWLEDGE CENTRE — SIDEBAR BUTTONS   --------------*/
/* -------------------------------------------------------------------*/

.kc-sidebar-btn {
    display: block;
    width: 100%;
    text-align: left;
    background-color: #3A4750;
    color: #EEEEEE;
    border: none;
    border-bottom: 1px solid rgba(238, 238, 238, 0.15);
    border-left: 4px solid transparent;
    padding: 0.85rem 1.25rem;
    transition: background-color 0.15s ease, border-left-color 0.15s ease;
    cursor: pointer;
    font-size: 0.95rem;
    font-family: 'Poppins', sans-serif;
}

.kc-sidebar-btn:hover {
    background-color: rgba(238, 238, 238, 0.08);
    color: #EEEEEE;
}

.kc-sidebar-btn.active {
    border-left-color: #D72323;
    background-color: rgba(215, 35, 35, 0.18);
    color: #ffffff;
}


/* -------------------------------------------------------------------*/
/* -----------     KNOWLEDGE CENTRE — MOBILE PILL NAV   --------------*/
/* -------------------------------------------------------------------*/

#kc-nav-pills::-webkit-scrollbar {
    display: none;
}

#kc-nav-pills .nav-link {
    color: #303841;
}

#kc-nav-pills .nav-link:hover {
    color: #303841;
}

#kc-nav-pills .nav-link.active {
    background-color: #303841;
    color: #ffffff;
}


/* -------------------------------------------------------------------*/
/* -----------     KNOWLEDGE CENTRE — DOCUMENT PANES    --------------*/
/* -------------------------------------------------------------------*/

.kc-pane {
    display: none;
}

.kc-pane.active {
    display: block;
    animation: kc-fade-in 0.22s ease;
}


/* -------------------------------------------------------------------*/
/* -----------     KNOWLEDGE CENTRE — DOCUMENT HEADER   --------------*/
/* -------------------------------------------------------------------*/

.kc-doc-header-text {
    padding: 0.75rem 1.25rem;
}


/* -------------------------------------------------------------------*/
/* -----------     KNOWLEDGE CENTRE — DOCUMENT BODY     --------------*/
/* -------------------------------------------------------------------*/

.kc-doc-body {
    padding: 2rem 1.5rem 2rem 1.5rem;
}

.kc-doc-body p {
    margin-bottom: 1.1rem;
}

.kc-doc-body ul,
.kc-doc-body ol {
    padding-left: 1.75rem;
    margin-bottom: 1rem;
}

.kc-doc-body ul li,
.kc-doc-body ol li {
    margin-bottom: 0.4rem;
}

.kc-doc-body h5 {
    margin-top: 1.5rem;
}