:root {

    --primary-text: #1f232f;

    --tertiary-text: #3F6A9F;


    /* Colors */
    --primary: #599edc;
    --primary-dull: #3F6A9F;

    --primary-alpha: #599fdc11;
    --primary-hover: #50c4de;

    --secondary: #ffa200;
    --secondary-dull: #b57d1b;

    --secondary-alpha: #ffa200a6;

    --tertiary: #d5d7f2;

    --primary-dark: #1f232f;
    --secondary-dark: #2a384e;

    --dark-bg-color: #;
    /* --text-body-color: #9c9eb7; */
    --text-body-color: #f2f4ff;

   

    --container-dark-bg: #2a384e;
    --bg-dark-lighter: #2a384e;
    --neutral-alpha: rgba(255, 255, 255, 0.1);
    --standard-font-size: 0.9rem;


    /* Branding colours */
    --brand-primary: #599edc;
    --brand-secondary: #50c4de;

    /* Landing Backgrounds */
    /* From 0 (lightest) to 10 (darkest) */
    --bg-base: #fff;
    --bg-secondary : #141a25;
    --bg-secondary-lighter: #202B3F;
    --bg-two: #ff0000;
    --bg-tertiary: #F9FCFF;
    --bg-four: #ff0000;
    --sky-blue: #ff0000;
    /* --dar k-sk y-blu e: #e4f3 fe;  */

}

::-moz-selection {
    /* Code for Firefox */
    color: #eeeeff;
    background: var(--primary);
}

::selection {
    color: #eeeeff;
    background: var(--primary);
}

/* TEST APPEARING IMAGES ON SCROLL */
.scroll-image {
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
  .scroll-image.visible {
    opacity: 1;
  }
/* END TEST APPEARING IMAGES ON SCROLL */





body {
    font-family: "Poppins", sans-serif;
    background-color: #172031;
    color: var(--secondary-dark);
    font-size: var(--standard-font-size);
}

pre {
    color: var(--primary);
}

a {
    color: var(--tertiary);
}

a:hover {
    color: #fff;
    text-decoration: none;
}

@media (min-width: 768px) {
    .w-md-50 {
        width: 50%;
    }

    .w-md-75 {
        width: 75%;
    }
}


.w-30 {
    width: 30%;
}

.bg-brand {
    background-color: var(--primary);
}

.bg-white a {
    color: var(--primary);
}

.bg-white a:hover {
    color: #979eaf;
    text-decoration: none;
}

.lead {
    font-size: 1.125rem;
    color: var(--tertiary);
}

.lead-5 {
    font-size: 1rem;
}

.light-section {
    /* background-color: #F3FCfb; */
    background-color: var(--bg-tertiary);
}

.light-section h2 {
    color: var(--secondary-dark);
    font-weight: 900 !important;
    font-size: 2.4rem;
}

.light-section-gradient-card {
    background: rgb(80, 196, 222);
    background: radial-gradient(circle at top left,
            rgb(80, 196, 222) 0%,
            rgb(68, 115, 150) 100%);
    padding: 2.5rem 2.5rem;
    border-radius: 18px !important;
    margin: 0;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    min-height: 380px;
}

.light-section-gradient-card h4 {
    font-weight: 700 !important;
    color: #fff;
}

.dark-section {
    background-color: var(--secondary-dark);
    padding: 75px 0;
}

.dark-section h2 {
    color: var(--secondary-dark);
    font-weight: 900 !important;
    font-size: 2.4rem;
}

.dark-section-gradient-card {
    background: rgb(80, 196, 222);
    background: radial-gradient(circle at top left,
            rgb(80, 196, 222) 0%,
            rgb(68, 115, 150) 100%);
    padding: 2.5rem 2.5rem;
    border-radius: 18px !important;
    margin: 0;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    min-height: 380px;
    color: var(--tertiary);
}

.dark-section-gradient-card h4 {
    font-weight: 700 !important;
    color: #fff;
}

hr {
    background-color: var(--primary) !important;
    border-radius: 2px;
    height: 4px;
    margin-left: 0;
}

hr .centered {
    margin-left: auto;
    margin-right: auto;
}

.logo-main {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
}

.logo-main:hover {
    color: var(--primary) !important;
    text-decoration: none;
}


.bg-primary {
    background-color: var(--primary) !important;
}

.bg-primary-2 {
    background-color: var(--primary-hover) !important;
}





.bg-section-secondary {
    background-color: var(--bg-secondary-lighter) !important;
}

.bg-dark-tone {
    background-color: #172031;
    background-color: #172031;
    /* background-image:url(../../../data/images/temp-bg.png);
    background-position: 100% 0%;
    background-repeat: no-repeat; */
    padding: 36px;
}

.bg-white {
    color: #172031;
    color: #172031;
}

.display-2 {
    /* color: #fff; */
    color: var(--primary-hover) !important;
    font-weight: 700;
    font-size: 2.5rem;
    padding-bottom: 5px;
    line-height: 1.4;
    letter-spacing: -1px;

    /* background: linear-gradient(195deg, #638ecb, var(--primary)  );
  -webkit-background-clip: text;
  background-clip: text; 
  -webkit-text-fill-color: transparent; */
}

.display-3 {
    color: #fff;
    font-weight: 700;
    font-size: 2.6rem;
    padding-bottom: 5px;
    line-height: 1.5;
}

.display-4 {
    color: #fff;
    font-weight: 700;
    font-size: 2.3rem;
}

.display-5 {
    color: #fff;
    font-size: 1.8rem;

    font-weight: 700;
    /*font-size: 2.6rem;
  padding-bottom: 5px;
  line-height: 1.5; */
}

.display-6 {
    color: #fff;
    font-size: 1.6rem;

    font-weight: 600;
    /*font-size: 2.6rem;
  padding-bottom: 5px;
  line-height: 1.5; */
}

.btn {
    border-radius: 12px;
    /* font-size: inherit; */
}

.btn-primary {
    background-color: var(--primary-dull) !important;
    border: 1px solid var(--primary);
    color: #fff;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.btn-primary-2 {
    background-color: var(--primary-hover) !important;
    border: 1px solid var(--primary);
    color: #fff;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.btn-primary-3 {
    background-color: var(--primary) !important;
    border: 1px solid var(--primary);
    color: #fff;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
}





.btn-primary:hover {
    /*background-color: var(--primary);*/
    border-color: var(--primary-hover);
    background-color: var(--primary-hover);

    /* Background style on hover */
    /* background: radial-gradient(ellipse farthest-corner at left top, #b8b65b 0%, #FEDB37  8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%); */
}


.btn-primary:focus {
    color: #fff;
    border: 1px solid var(--primary);
    box-shadow: inherit !important;

}


.btn-primary-dark {
    background-color: #fff;
    border: 2px var(--bg-dark-lighter) solid;
    color: var(--bg-dark-lighter);
    /* background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #af8a39 30%, #a18544 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #b8b65b 0%, #FEDB37  8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%); */

    /* transition: all 1s ease; Transition for smooth effect */
}

.btn-primary-dark:hover {
    /*background-color: var(--primary);*/
    color: #fff;
    background-color: var(--bg-dark-lighter);
    border-color: var(--bg-dark-lighter);

    /* Background style on hover */
    /* background: radial-gradient(ellipse farthest-corner at left top, #b8b65b 0%, #FEDB37  8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%); */
}

.btn-secondary {
    background-color: var(--secondary-dull) !important;
    border: 1px solid var(--secondary);
    color: #fff;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.btn-secondary:hover {
    /*background-color: var(--primary);*/
    border-color: var(--primary-hover);
    background-color: var(--primary-hover);

    /* Background style on hover */
    /* background: radial-gradient(ellipse farthest-corner at left top, #b8b65b 0%, #FEDB37  8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%); */
}

.btn-primary-dark:not(:disabled):not(.disabled).active,
.btn-primary-dark:not(:disabled):not(.disabled):active,
.show>.btn-primary-dark.dropdown-toggle {
    color: #fff;
    background-color: var(--bg-dark-lighter);
    border-color: var(--bg-dark-lighter);
}

.btn-outline-primary {
    background-color: var(--primary-alpha) !important;
    border: 2px solid var(--primary);
    color: #fff;
    border-radius: 12px;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.btn-outline-primary:hover {
    background-color: var(--bg-primary-dull);
    border-color: var(--primary-hover);
}

.btn-outline-primary:focus {
    color: #fff;
    border: 1px solid var(--primary);
    box-shadow: inherit !important;
}

.btn-outline-muted {
    background-color: var(--primary-alpha) !important;
    border: 1px solid var(--bg-dark-lighter);
    color: var(--bg-primary-dull);


    /* color: #fff; */
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.btn-outline-muted:hover {
    background-color: var(--bg-dark-lighter);
    border-color: var(--primary-hover);
    color: var(--bg-primary-dull);

}

.btn-outline-muted:focus {
    color: #fff;
    border: 1px solid var(--bg-dark-lighter);
    box-shadow: inherit !important;
}


::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    opacity: 0.7;
    /* Firefox */
}

.card {
    background-color: transparent !important;
}

.form-control:focus {
    color: var(--tertiary);
    background-color: #fff;
    border-color: var(--primary);
    outline: 0;
    border: 1px var(--primary) solid;
    box-shadow: 0 0 5px 0px var(--primary);
    background-color: var(--primary-alpha);
}

.form-control {
    background-color: var(--neutral-alpha) !important;
    border: 1px solid var(--primary);
    color: var(--tertiary);
    border-radius: 8px;
    min-height: calc(1.5em + 0.75rem + 2px);
    height: initial;
    font-size: inherit;
}


.bg-white input[type="text"],
.bg-white input[type="password"],
.bg-white input[type="button"],
.bg-white input[type="email"],
.bg-white input[type="date"],
.bg-white button,
.bg-white select,
.bg-white textarea {
    border: 2px var(--bg-dark-lighter) solid;
    /* col     or: #ccc; */
    border-radius: 12px;
    /* background-color: transparent !important; */
    background-color: rgba(255, 255, 255, 0.1) !important;
    padding: 0.75rem 1.5rem;
}

.bg-white input[type="text"]:hover,
.bg-white input[type="text"]:focus,
.bg-white input[type="password"]:hover,
.bg-white input[type="password"]:focus,
.bg-white input[type="button"]:hover,
.bg-white input[type="button"]:focus,
.bg-white input[type="email"]:hover,
.bg-white input[type="email"]:focus,
.bg-white input[type="date"]:hover,
.bg-white input[type="date"]:focus,
.bg-white button:hover,
.bg-white button:focus,
.bg-white select:hover,
.bg-white select:focus,
.bg-white textarea:hover,
.bg-white textarea:focus {
    /* color: #ccc; */
    /* background-color: #eee !important; */
    border: 2px var(--bg-dark-lighter) solid;
    outline: none;
}

.input-group-text {
    background-color: transparent !important;
    border-color: var(--primary);
    color: var(--primary);
}

.input-group-text:hover {
    color: var(--primary);
    background-color: var(--bg-dark-lighter) !important;
}

.rounded-xl {
    border-radius: 12px;
}

.purecounter {
    font-size: 2.8rem;
    font-weight: 800 !important;
    color: #fff;
}

.purecounter-container p {
    margin-bottom: 0;
    /* font-size: 0.9rem; */
    font-size: var(--standard-font-size);
    color: var(--tertiary);
}

.tick-list {
    list-style: none;
    /* Remove the default bullet point */
}

.tick-list li {
    position: relative;
    /* Create a positioning context for the tick */
    padding-left: 35px;
    /* Add space for the tick */
    margin-bottom: 15px;
}

.tick-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 0%;
    transform: translateY(15%);
    width: 20px;
    /* Adjust the size of the circle */
    height: 20px;
    /* Adjust the size of the circle */
    background-color: var(--primary);
    /* Set the background color to green */
    border-radius: 50%;
    /* Make it a circle */
    text-align: center;
    /* Center the tick horizontally */
    line-height: 20px;
    /* Center the tick vertically */
    font-size: 13px;
}

.shadow-strong {
    box-shadow: 0px 4px 8.1px 1px rgba(0, 0, 0, 0.5) !important;
}

.glowbox {
    border: 2px var(--primary) solid;
    border-radius: 1rem;
    /* box-shadow: 0 0 10px 0px var(--primary); */
    background: rgb(26, 32, 43);
    background: linear-gradient(0deg, #172031 30%, var(--bg-dark-lighter) 60%);
}

.dropdown-menu {
    background-color: var(--bg-dark-lighter);
    color: #eee;
}

.dropdown-menu a {
    color: #eee;
}

.dropdown-menu a:hover {
    color: #eee;

    background-color: rgba(255, 255, 255, 0.1) !important;
}

.left-column {
    flex: 0 0 300px;
    /* Set the width of the left column */
    background-color: var(--bg-dark-lighter);
    padding: 20px;
    margin: 0 10px 10px 0;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

/* .list-group-item {
  background-color: transparent;
  color: #ffffff;
  border: none;
  padding: .50rem 1.25rem;
} */

.list-group-item {
    background-color: transparent;
    /* color: #172031 !important; */
    border: none;
    padding: 0.5rem 1.25rem;
}

.text-primary {
    color: var(--primary) !important;
}

.text-primary-2 {
    color: var(--primary-hover) !important;
}



.text-tertiary {
    color: var(--tertiary) !important;
}

.text-success {
    color: #80ab59 !important;
}

.text-warning {
    color: var(--primary) !important;
}

.text-danger {
    color: #b83d3d !important;
}

.container {
    margin-top: 50px;
    /* display: flex; */
}

.main-area {
    flex: 1;
    /* Take up remaining space */
}

.content {
    padding: 20px;
    margin: 0 10px 10px 0;
    background-color: var(--bg-dark-lighter);
    /* Additional styling for the content within the main area */
}

.content.top {
    border-top-right-radius: 15px;
}

.content.widgets {
    background-color: var(--bg-dark-lighter);
    /* background-color: transparent; */
    padding: 10px 30px;
}

.content.bottom {
    border-bottom-right-radius: 15px;
}

.table-dark {
    color: #eee;
    background-color: transparent;
}

.table-dark thead {
    color: #7c7c7c;
}

.table thead th {
    border-bottom: none;
}

.table td,
.table th {
    border-color: #172031 !important;
}

.dark-gradient-container {
    background: rgb(30, 48, 76);
    background: linear-gradient(115deg,
            rgb(30, 48, 76) 0%,
            rgb(20, 26, 37) 14%,
            rgb(23, 32, 49) 37%,
            rgb(35, 57, 91) 67%,
            rgb(30, 32, 36) 100%);
    color: var(--tertiary-text);
}

.navbar-container {
    background-color: #599fdc11;
}

.alert-success {
    border: 2px solid #80ab59;
    background-color: rgba(128, 171, 89, 0.4) !important;
    color: #eee !important;
}

.alert-danger {
    border: 2px solid #d75a5a;
    background-color: rgba(215, 90, 90, 0.4) !important;
    color: #eee !important;
}


.text-glow-dark {

    color: #fff;
    text-shadow: 0px 0px 10px #000, 0px 0px 10px #000;




}

.d-hidden {
    display: none;
}