/*--------------------------

Template Name:	Forscend

Template URI: 	https://www.forscend.com.sg/

Author: forscendtheme

---------------------------*/

/**
*****************************************

@File: saas Template Styles



* This file contains the styling for the actual Template,

this is the file you need to edit to change the look of the Template.

01. General Styles

02. Background colors

03. Border colors

04. Text colors

05. Buttons

06. Preloader

07. Navigation

08. Footer

09. banner

10. Platform

11. About

12. Training

13. Contact

*****************************************
**/


/*==========================
01. General Styles
==========================*/

:root,
[data-bs-theme="light"] {
  --bs-fblue100-rgb: 235, 240, 250;
  --bs-fblue200-rgb: 195, 209, 239;
  --bs-fblue300-rgb: 155, 178, 228;
  --bs-fblue400-rgb: 115, 148, 217;
  --bs-fblue500-rgb: 75, 117, 206;
  --bs-fblue600-rgb: 49, 91, 180;
  --bs-fblue700-rgb: 39, 72, 142;
  --bs-fblue800-rgb: 27, 51, 100;
  --bs-fblue900-rgb: 16, 30, 60;
  --bs-fblack100-rgb: 246, 247, 249;
  --bs-fblack200-rgb: 214, 219, 230;
  --bs-fblack300-rgb: 183, 191, 210;
  --bs-fblack400-rgb: 151, 163, 190;
  --bs-fblack500-rgb: 92, 109, 148;
  --bs-fblack600-rgb: 72, 86, 116;
  --bs-fblack700-rgb: 53, 62, 85;
  --bs-fblack800-rgb: 33, 39, 53;
  --bs-fblack900-rgb: 0, 0, 0;
}

html {
  font-size: 16px !important;
  scroll-behavior: smooth;
}

@media (min-width: 768px) {
  html {
    font-size: 16px !important;
  }
}

@media (min-width: 1400px) {
  html {
    font-size: 18px !important;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  font-family: Calibri, Arial, sans-serif !important;
}

img {
  display: block;
}

a {
  text-decoration: none;
}

ul,
ol {
  margin-left: 0;
  padding-left: 0;
  list-style-position: inside;
}

.bold_number_list > li {
  font-weight: bold;
}

.bold_number_list > li p {
  font-weight: normal;
  padding: 5px 0px 10px 20px;
}

.bold_number_list li::marker {
  font-weight: bold;
}

.bold_nonstyle_list > li {
  font-weight: bold;
  list-style-type: none;
}

.bold_nonstyle_list > li p {
  font-weight: normal;
  padding: 5px 0px 10px 0px;
}

.mb-4a {
  margin-bottom: 1.75rem !important;
}


/*==========================
02. Background colors
==========================*/

.bg-fblue100 {background-color: rgba(var(--bs-fblue100-rgb), var(--bs-bg-opacity, 1)) !important;}
.bg-fblue200 {background-color: rgba(var(--bs-fblue200-rgb), var(--bs-bg-opacity, 1)) !important;}
.bg-fblue300 {background-color: rgba(var(--bs-fblue300-rgb), var(--bs-bg-opacity, 1)) !important;}
.bg-fblue400 {background-color: rgba(var(--bs-fblue400-rgb), var(--bs-bg-opacity,1 )) !important;}
.bg-fblue500 {background-color: rgba(var(--bs-fblue500-rgb), var(--bs-bg-opacity, 1)) !important;}
.bg-fblue600 {background-color: rgba(var(--bs-fblue600-rgb), var(--bs-bg-opacity, 1)) !important;}
.bg-fblue700 {background-color: rgba(var(--bs-fblue700-rgb), var(--bs-bg-opacity, 1)) !important;}
.bg-fblue800 {background-color: rgba(var(--bs-fblue800-rgb), var(--bs-bg-opacity, 1)) !important;}
.bg-fblue900 {background-color: rgba(var(--bs-fblue900-rgb), var(--bs-bg-opacity, 1)) !important;}
.bg-fblack100 {background-color: rgba(var(--bs-fblack100-rgb), var(--bs-bg-opacity, 1)) !important;}
.bg-fblack200 {background-color: rgba(var(--bs-fblack200-rgb), var(--bs-bg-opacity, 1)) !important;}
.bg-fblack300 {background-color: rgba(var(--bs-fblack300-rgb), var(--bs-bg-opacity, 1)) !important;}
.bg-fblack400 {background-color: rgba(var(--bs-fblack400-rgb), var(--bs-bg-opacity, 1)) !important;}
.bg-fblack500 {background-color: rgba(var(--bs-fblack500-rgb), var(--bs-bg-opacity, 1)) !important;}
.bg-fblack600 {background-color: rgba(var(--bs-fblack600-rgb), var(--bs-bg-opacity, 1)) !important;}
.bg-fblack700 {background-color: rgba(var(--bs-fblack700-rgb), var(--bs-bg-opacity, 1)) !important;}
.bg-fblack800 {background-color: rgba(var(--bs-fblack800-rgb), var(--bs-bg-opacity, 1)) !important;}
.bg-fblack900 {background-color: rgba(var(--bs-fblack900-rgb), var(--bs-bg-opacity, 1)) !important;}

/*==========================
03. Border colors
==========================*/

.border-fblue100 {border-color: rgba(var(--bs-fblue100-rgb), var(--bs-bg-opacity, 1)) !important;}
.border-fblue200 {border-color: rgba(var(--bs-fblue200-rgb), var(--bs-bg-opacity, 1)) !important;}
.border-fblue300 {border-color: rgba(var(--bs-fblue300-rgb), var(--bs-bg-opacity, 1)) !important;}
.border-fblue400 {border-color: rgba(var(--bs-fblue400-rgb), var(--bs-bg-opacity, 1)) !important;}
.border-fblue500 {border-color: rgba(var(--bs-fblue500-rgb), var(--bs-bg-opacity, 1)) !important;}
.border-fblue600 {border-color: rgba(var(--bs-fblue600-rgb), var(--bs-bg-opacity, 1)) !important;}
.border-fblue700 {border-color: rgba(var(--bs-fblue700-rgb), var(--bs-bg-opacity, 1)) !important;}
.border-fblue800 {border-color: rgba(var(--bs-fblue800-rgb), var(--bs-bg-opacity, 1)) !important;}
.border-fblue900 {border-color: rgba(var(--bs-fblue900-rgb), var(--bs-bg-opacity, 1)) !important;}
.border-fblack100 {border-color: rgba(var(--bs-fblack100-rgb), var(--bs-bg-opacity, 1)) !important;}
.border-fblack200 {border-color: rgba(var(--bs-fblack200-rgb), var(--bs-bg-opacity, 1)) !important;}
.border-fblack300 {border-color: rgba(var(--bs-fblack300-rgb), var(--bs-bg-opacity, 1)) !important;}
.border-fblack400 {border-color: rgba(var(--bs-fblack400-rgb), var(--bs-bg-opacity, 1)) !important;}
.border-fblack500 {border-color: rgba(var(--bs-fblack500-rgb), var(--bs-bg-opacity, 1)) !important;}
.border-fblack600 {border-color: rgba(var(--bs-fblack600-rgb), var(--bs-bg-opacity, 1)) !important;}
.border-fblack700 {border-color: rgba(var(--bs-fblack700-rgb), var(--bs-bg-opacity, 1)) !important;}
.border-fblack800 {border-color: rgba(var(--bs-fblack800-rgb), var(--bs-bg-opacity, 1)) !important;}
.border-fblack900 {border-color: rgba(var(--bs-fblack900-rgb), var(--bs-bg-opacity, 1)) !important;}


/*==========================
04. Text colors
==========================*/

.text-fblue100 {color: rgba(var(--bs-fblue100-rgb), var(--bs-bg-opacity, 1)) !important;}
.text-fblue200 {color: rgba(var(--bs-fblue200-rgb), var(--bs-bg-opacity, 1)) !important;}
.text-fblue300 {color: rgba(var(--bs-fblue300-rgb), var(--bs-bg-opacity, 1)) !important;}
.text-fblue400 {color: rgba(var(--bs-fblue400-rgb), var(--bs-bg-opacity, 1)) !important;}
.text-fblue500 {color: rgba(var(--bs-fblue500-rgb), var(--bs-bg-opacity, 1)) !important;}
.text-fblue600 {color: rgba(var(--bs-fblue600-rgb), var(--bs-bg-opacity, 1)) !important;}
.text-fblue700 {color: rgba(var(--bs-fblue700-rgb), var(--bs-bg-opacity, 1)) !important;}
.text-fblue800 {color: rgba(var(--bs-fblue800-rgb), var(--bs-bg-opacity, 1)) !important;}
.text-fblue900 {color: rgba(var(--bs-fblue900-rgb), var(--bs-bg-opacity, 1)) !important;}
.text-fblack100 {color: rgba(var(--bs-fblack100-rgb), var(--bs-bg-opacity, 1)) !important;}
.text-fblack200 {color: rgba(var(--bs-fblack200-rgb), var(--bs-bg-opacity, 1)) !important;}
.text-fblack300 {color: rgba(var(--bs-fblack300-rgb), var(--bs-bg-opacity, 1)) !important;}
.text-fblack400 {color: rgba(var(--bs-fblack400-rgb), var(--bs-bg-opacity, 1)) !important;}
.text-fblack500 {color: rgba(var(--bs-fblack500-rgb), var(--bs-bg-opacity, 1)) !important;}
.text-fblack600 {color: rgba(var(--bs-fblack600-rgb), var(--bs-bg-opacity, 1)) !important;}
.text-fblack700 {color: rgba(var(--bs-fblack700-rgb), var(--bs-bg-opacity, 1)) !important;}
.text-fblack800 {color: rgba(var(--bs-fblack800-rgb), var(--bs-bg-opacity, 1)) !important;}
.text-fblack900 {color: rgba(var(--bs-fblack900-rgb), var(--bs-bg-opacity, 1)) !important;}


/*==========================
05. Buttons
==========================*/

.btn-fblue600 {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgba(var(--bs-fblue600-rgb));
  --bs-btn-border-color: rgba(var(--bs-fblue600-rgb));
  --bs-btn-hover-color: rgba(var(--bs-fblue600-rgb));
  --bs-btn-hover-bg: # ;
  --bs-btn-hover-border-color: rgba(var(--bs-fblue400-rgb));
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(var(--bs-fblue700-rgb));
  --bs-btn-active-border-color: rgba(var(--bs-fblue700-rgb));
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgba(var(--bs-fblack400-rgb));
  --bs-btn-disabled-border-color: rgba(var(--bs-fblack400-rgb));
}

.btn-fwhite-black {
  --bs-btn-color: rgba(var(--bs-fblack900-rgb));
  --bs-btn-bg: #fff;
  --bs-btn-border-color: rgba(var(--bs-fblack400-rgb));
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(var(--bs-fblack900-rgb));
  --bs-btn-hover-border-color: rgba(var(--bs-fblack600-rgb));
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(var(--bs-fblack800-rgb));
  --bs-btn-active-border-color: rgba(var(--bs-fblack800-rgb));
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgba(var(--bs-fblack400-rgb));
  --bs-btn-disabled-border-color: rgba(var(--bs-fblack400-rgb));
}

.btn-fwhite-blue {
  --bs-btn-color: rgba(var(--bs-fblue600-rgb));
  --bs-btn-bg: #fff;
  --bs-btn-border-color: rgba(var(--bs-fblack400-rgb));
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(var(--bs-fblue600-rgb));
  --bs-btn-hover-border-color: rgba(var(--bs-fblue400-rgb));
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(var(--bs-fblack800-rgb));
  --bs-btn-active-border-color: rgba(var(--bs-fblack800-rgb));
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgba(var(--bs-fblack400-rgb));
  --bs-btn-disabled-border-color: rgba(var(--bs-fblack400-rgb));
}


/*==========================
04. Preloader
==========================*/

#preloader {
  z-index: 9999;
  pointer-events: none; /* Prevents hover/click blocking on the page behind */
}

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  animation-fill-mode: both;
  animation: bblFadInOut 1.8s infinite ease-in-out;
}

.loader {
  --color-1: #27488e;
  --size: 1px; /* Increased slightly so the dots are clearly visible */

  color: var(--color-1);
  font-size: calc(7 * var(--size));
  position: relative;
  text-indent: -9999em;
  transform: translateZ(0);
  animation-delay: -0.16s;
  top: -2.5em; /* Offsets the shadow position to center the loader perfectly */
}

.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}

.loader:before {
  left: -3.5em;
  animation-delay: -0.32s;
}

.loader:after {
  left: 3.5em;
}

@keyframes bblFadInOut {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}


/*==========================
07. Navigation
==========================*/

.nav-logo {
  height: 36px;
  padding: 5px 0px;
}

@media (min-width: 992px) {
  .nav-logo {
    height: 38px;
    padding: 7px 0px;
  }
}

@media (min-width: 1400px) {
  .nav-logo {
    height: 40px;
    padding: 7px 0px;
  }
}

.nav-link.text-white.fw-bold:hover {
  color: rgba(var(--bs-fblue300-rgb)) !important;
}

.navbar-toggler {
  border: none !important;
}

.text-bg-fblue800 {
  color: #fff !important;
  background-color: RGBA(var(--bs-fblue800-rgb), var(--bs-bg-opacity, 1)) !important;
}


/*==========================
08. Footer
==========================*/

.footer-logo {
  display: none;
  width: 149px;
  height: 80px;
}

@media (min-width: 992px) {
  .footer-logo {
    display: inline;
  }
}


/*==========================
09. banner
==========================*/

.banner-img-bg01 {
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: none;
  width: 100%;
  height: 400px;
}

.banner-img-bg02 {
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: auto 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-color: none;
  width: 100%;
  height: 400px;
}


/*==========================
10. Platform
==========================*/




/*==========================
13. Contact
==========================*/

.contact-info-box li i,
.contact-info-box li a {
  color: rgba(var(--bs-fblue600-rgb));
}

.contact-info-box li a:hover {
  color: rgba(var(--bs-fblue800-rgb));
  font-weight: bold;
}