/* --------------------------------------
=========================================
TechnoSysCon - Multipurpose Landing Page
Version: 1.0
Designed By: CreativeCary
=========================================
-----------------------------------------

1. GLOABL-CSS
    1.1 IMPORT GOOGLE WEBFONT               
	1.2 GENERAL-CSS
	1.3 TYPOGRAPHY

2. PRE-LOADER
    2.1 LOADER              
	2.2 LOADING ANIMATION

3. SECTION CSS
    3.1 BASIC STYLE              

4. HEADER SECTION
    4.1 HEADER LEFT              
	4.2 SUBMIT FORM
	4.3 NOTIFICATIONS


5. BRAND SECTION
    5.1 BASIC STYLE              
	
6. FEATURE SECTION
    6.1 BASIC STYLE              

7. VIDEO SECTION
    7.1 BASIC STYLE              

8. OUR CLIENTS SECTION
    8.1 BASIC STYLE              

9. FAQ SECTION
    9.1 BASIC STYLE              


10. FOOTER SECTION
    10.1 FOOTER SOCIAL 
	10.2 FOOTER COPYRIGHT             


11. RESPONSIVE FIXES
    11.1 FOR MAXIMUM DEVICE WIDTH 1200PX  
    11.2 FOR MAXIMUM DEVICE WIDTH 992PX            
    11.2 FOR MAXIMUM DEVICE WIDTH 480PX            

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

/* --------------------------------------
=========================================
   1. GLOABL - CSS
=========================================
-----------------------------------------*/

/*---------------------------------------
   1.1 IMPORT GOOGLE WEBFONT               
-----------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);
/*---------------------------------------
   1.2 GENERAL - CSS               
-----------------------------------------*/
@import "./icons/font-awesome/css/fontawesome-all.css";
@import "./icons/themify-icons/themify-icons.css";
:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #cad7fd;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #2f73f2;
  --bs-secondary: #ff3c78;
  --bs-danger: #dc3545;
  --bs-info: #6bc1f9;
  --bs-success: #3cd278;
  --bs-warning: #f9c78f;
  --bs-light: #f0f6fa;
  --bs-dark: #102d47;
  --bs-inverse: #2e4b66;
  --bs-light-muted: #f8fafc;
  --bs-light-primary: #DAE7FF;
  --bs-light-info: #f3f9fd;
  --bs-light-inverse: #dfebfc;
  --bs-light-gray: #e2e8f3;
  --bs-light-success: #E4FDFF;
  --bs-light-danger: #FFE0E0;
  --bs-light-primary-gray: #effbff;
  --bs-slateblue: #b2d5ea;
  --bs-slateblue-dark: #C7DAE1;
  --bs-lightdark-danger: #fbcac9;
  --bs-lightdark-warning: #ffe8af;
  --bs-purple: #cad7fd;
  --bs-lightdark-success: #7df9c2;
  --bs-light-green: #cefcf4;
  --bs-lightdark-gray: #bccfe1;
  --bs-themecolor-dark: #102c46;
  --bs-input-dark: #143655;
  --bs-dark-primary: #054ac8;
  --bs-primary-rgb: 47, 115, 242;
  --bs-secondary-rgb: 255, 60, 120;
  --bs-danger-rgb: 220, 53, 69;
  --bs-info-rgb: 107, 193, 249;
  --bs-success-rgb: 60, 210, 120;
  --bs-warning-rgb: 249, 199, 143;
  --bs-light-rgb: 240, 246, 250;
  --bs-dark-rgb: 16, 45, 71;
  --bs-inverse-rgb: 46, 75, 102;
  --bs-light-muted-rgb: 248, 250, 252;
  --bs-light-primary-rgb: 218, 231, 255;
  --bs-light-info-rgb: 243, 249, 253;
  --bs-light-inverse-rgb: 223, 235, 252;
  --bs-light-gray-rgb: 226, 232, 243;
  --bs-light-success-rgb: 228, 253, 255;
  --bs-light-danger-rgb: 255, 224, 224;
  --bs-light-primary-gray-rgb: 239, 251, 255;
  --bs-slateblue-rgb: 178, 213, 234;
  --bs-slateblue-dark-rgb: 199, 218, 225;
  --bs-lightdark-danger-rgb: 251, 202, 201;
  --bs-lightdark-warning-rgb: 255, 232, 175;
  --bs-purple-rgb: 202, 215, 253;
  --bs-lightdark-success-rgb: 125, 249, 194;
  --bs-light-green-rgb: 206, 252, 244;
  --bs-lightdark-gray-rgb: 188, 207, 225;
  --bs-themecolor-dark-rgb: 16, 44, 70;
  --bs-input-dark-rgb: 20, 54, 85;
  --bs-dark-primary-rgb: 5, 74, 200;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size:1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #E5ECF8;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1.5rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-heading-color: #102d47;
  --bs-link-color: #898c94;
  --bs-link-hover-color: #0505e9;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}
/* #265cc2 */
/* #2f73f2 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  /* background-color: var(--bs-body-bg); */
  background-color: rgba(var(--bs-light-info-rgb), var(--bs-bg-opacity)) !important;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-align: center;
}


body {
	font-family: var(--bs-body-font-family);
	background: #fff;
	font-size: 20px; /* PIXEL FALLBACK */
	font-size: 2.6rem;
	line-height: 1.5;
	color: #8f96a9;
  
}

button {
	color: #fff;
	font-size: 18px;
	line-height: 50px;
	text-align: center;
	width: 50px;
	border: none;
}

button:hover {
	background: #c4d6e2;
}

iframe {
	border: none;
}

/*---------------------------------------
   1.3 TYPOGRAPHY               
-----------------------------------------*/

body{
	font-family:sans-serif;
}

h1 {
	font-size: 48px; /* PIXEL FALLBACK */
	font-size: 4.8rem;
	color: #fff;
   font-family: sans-serif;
}

h2, h3, h4, h5 {
	color: #000;
   font-family: sans-serif;

}

h2 {
	font-size: 36px; /* PIXEL FALLBACK */
	font-size: 3.6rem;
   font-family: sans-serif;

   
}
h3 {
	font-size: 22px; /* PIXEL FALLBACK */
	font-size: 2.2rem;
}

h4 {
	font-size: 26px; /* PIXEL FALLBACK */
	font-size: 2.6rem;
}

p {
	font-size: 16px; /* PIXEL FALLBACK */
	font-size: 1.6rem;
	color: #666666;
   font-family: sans-serif;
}

/* --------------------------------------
=========================================
   2. PRELOADER
=========================================
-----------------------------------------*/

/*---------------------------------------
   2.1 LOADING               
-----------------------------------------*/

#loading{
	background:#2980b9;
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 1;
	margin-top: 0px;
	top: 0px;
}

#loading-center{
	width: 100%;
	height: 100%;
	position: relative;
}

#loading-center-absolute {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 200px;
	width: 200px;
	margin-top: -100px;
	margin-left: -100px;
}

#object{
	width: 30px;
	height: 30px;
	-webkit-animation: animate 1s infinite ease-in-out;
	animation: animate 1s infinite ease-in-out;
	margin-right: auto;
	margin-left: auto;
	margin-top: 60px;
	background:#fff;
}

/*---------------------------------------
   2.2 LOADING ANIMATION               
-----------------------------------------*/

@-webkit-keyframes animate {
  0% { -webkit-transform: perspective(160px); }
  50% { -webkit-transform: perspective(160px) rotateY(-180deg); }
  100% { -webkit-transform: perspective(160px) rotateY(-180deg) rotateX(-180deg); }
}

@keyframes animate {
  0% { 
    transform: perspective(160px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg); 
  } 50% { 
    transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
    -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(0deg) ;
  } 100% { 
    transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
    -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
  }
}

/* --------------------------------------
=========================================
   3. SECTION CSS
=========================================
-----------------------------------------*/

/*---------------------------------------
   3.1 BASIC STYLE             
-----------------------------------------*/

section {
	padding: 70px 0;
	text-align:center;
}

section h2 {
	margin: 0;
}

.seprator {
	display: inline-block;
	width: 100px;
	height: 2px;
	margin: 26px 0;
	background: #2980b9;
}

/* --------------------------------------
=========================================
   4. HEADER SECTION
=========================================
-----------------------------------------*/

/*---------------------------------------
   4.1 HEADER LEFT             
-----------------------------------------*/

#header-section {
	/* background: #2980b9; */
	color: #fff;
	text-align:left;
}

#header-section h1 {
	margin-top: 48px;
}

#header-section p {
	font-size: 18px; /* PIXEL FALLBACK */
	font-size: 1.8rem;
	color:#fff;
}

ul.header-list {
	padding: 0px;
}

ul.header-list li {
	background: url("../img/check.png") no-repeat 0 8px;
	font-size: 18px; /* PIXEL FALLBACK */
	font-size: 1.8rem;
	line-height: 26px;
	list-style: outside none;
	margin-bottom: 26px;
	padding-left: 60px;
}

/*---------------------------------------
   4.2 SUBMIT FORM              
-----------------------------------------*/

.submit-form-position{
	position:absolute;
	top:-30px;
	}
	
.submit-form-position img{
	max-width:364px;
	width:100%;
	}
	
.submit-form {
	background: #f6f6f6;
	padding: 20px 20px 43px;
	width:100%;
	float:left;
	border-radius: 10px;
}

.submit-form h3 {
    margin: 44px 0 20px;
	text-align: center !important;
    font-weight: bold;

}

.submit-form p {
	color: #000 !important;
	margin: 30px 0 0;
	padding: 0;
	text-align: center;
	width: 100%;
}

.submit-form input {
	background: #fff;
	border: none;
	color: #000;
	height: 48px;
	margin-bottom:22px;
	padding: 5px;
	width: 100%;
    border-radius: 0;
    -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,.075);
    box-shadow: inset 0 0 0 rgba(0,0,0,.075);
}

.submit-form button{
	width: 100%;
	margin: 0px;
	padding: 0px;
	height: 55px;
	background: #2f73f2;
	color: #fff;
	border: none;
}

.submit-form button:hover{
	background: #2f73f2;
}

/*---------------------------------------
   4.3 NOTIFICATIONS          
-----------------------------------------*/
#notifications {
    position: absolute;
    width: 100%;
    bottom: 392px;
    left: 0px;
}
.error {
    background: #d12323;
    color: #fff;
    text-align: center;
    line-height: 70px;
    margin-bottom: 15px;
}
	
.success{
	background:#42b089;
    color: #fff;
    text-align: center;
    line-height: 70px;
    margin-bottom: 15px;
	}

/* --------------------------------------
=========================================
   5. BRANDS SECTION
=========================================
-----------------------------------------*/

/*---------------------------------------
   5.1 BASIC STYLE           
-----------------------------------------*/

#brands-section h3 {
	font-weight: bold;
	margin: 0 0 30px;
	text-align:left;
}

.brand-logo {
	width:28%;
	display:inline-block;
	background: #f6f6f6;
	/*height: 90px;*/
	text-align: center;
	margin-bottom:20px;
        font-size: 1em;
        padding: 9.5px;
        font-weight: bold;
        font-style: italic;
}

.brand-logo.padd-right {
	margin-right:3%;
}

/* --------------------------------------
=========================================
   6. FEATURES SECTION
=========================================
-----------------------------------------*/

/*---------------------------------------
   6.1 BASIC STYLE            
-----------------------------------------*/

#feature-section {
	padding-top:0;
}

.feature {
	margin-top: 38px;
}

.feature h3 {
	font-weight: bold;
}
/* --------------------------------------
=========================================
   7. VIDEO SECTION
=========================================
-----------------------------------------*/

/*---------------------------------------
   7.1 BASIC STYLE            
-----------------------------------------*/

#video-section {
	background: #f6f6f6;
}

.video {
	margin-top: 38px;
	border:none;
}

.video iframe {
	width: 100%;
	float: left;
	height: 550px;
}

/* --------------------------------------
=========================================
   8. CLIENT SECTION
=========================================
-----------------------------------------*/

/*---------------------------------------
   8.1 BASIC STYLE            
-----------------------------------------*/
.location {
    display: inline-block;
}
.location-inner {
	width: 100%;
	float: left;
	background: #f6f6f6;
	padding:20px 5px 20px 5px;
}

.location-inner p {
	color: #666666;
	font-style: italic;
	line-height: 26px;
	padding: 10px;
	text-align: center;
}

.location-inner p.normal {
	font-style: normal;
}

.location-inner h3 {
	text-align: center;
	font-weight: bold;
}
.location.padd {
	/*margin-right:5px;*/
	margin-bottom:25px;
}



.standard {
/*    margin-top: 112px;*/
    display: inline-block;
}
.standard-inner {
	width: 100%;
	float: left;
	background: #f6f6f6;
	padding-bottom:20px;
}

.standard-inner p {
	color: #666666;
	font-style: italic;
	line-height: 26px;
	padding:0 10px;
	text-align: center;
}

.standard-inner p.normal {
	font-style: normal;
}

.standard-inner h3 {
	text-align: center;
	font-weight: bold;
}

.client {
    margin-top: 112px;
    display: inline-block;
}

.client-img {
	margin: -75px 0 20px;
	text-align: center;
}

.client-inner {
	width: 100%;
	float: left;
	background: #f6f6f6;
	padding-bottom:20px;
}

.client-inner p {
	color: #666666;
	font-style: italic;
	line-height: 26px;
	padding:0 10px;
	text-align: center;
}

.client-inner p.normal {
	font-style: normal;
}

.client-inner h3 {
	text-align: center;
	font-weight: bold;
}

/* --------------------------------------
=========================================
   9. FAQ SECTION
=========================================
-----------------------------------------*/	

/*---------------------------------------
   4.1 BASIC STYLE            
-----------------------------------------*/

#faq-section {
	background: #f6f6f6;
}

.questions {
	text-align:left;
}

.questions h3 {
	font-weight: bold;
}

.questions p {
	color: #666666;
}
/* --------------------------------------
=========================================
   10. FOOTER SECTION
=========================================
-----------------------------------------*/

/*---------------------------------------
   10.1 FOOTER SOCIAL            
-----------------------------------------*/

ul.footer-social-icons {
	display: inline-block;
	padding: 0px;
}

ul.footer-social-icons li {
	display:inline-block;
	margin: 0px 10px;
	list-style: none;
}

/*---------------------------------------
   10.2 FOOTER COPYRIGHT           
-----------------------------------------*/

#footer-section p {
	color: #fff;
	font-size: 14px;
	width: 100%
}

/* --------------------------------------
=========================================
   11. RESPONSIVE FIXES
=========================================
-----------------------------------------*/

/*---------------------------------------
   11.1 FOR MAXIMUM DEVICE WIDTH 1200PX            
-----------------------------------------*/

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

.submit-form-position{
	top:-22px;
	}
	
}

/*---------------------------------------
   11.1 FOR MAXIMUM DEVICE WIDTH 992PX            
-----------------------------------------*/

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

.submit-form-position{
	position:relative;
	top:0;
}
	
#faq-section {
	text-align:left;
}

.video iframe {
	height: 450px;
}

}

/*---------------------------------------
   11.1 FOR MAXIMUM DEVICE WIDTH 480PX            
-----------------------------------------*/

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

.brand-logo {
	width:100%;
}

.video iframe {
	height: 250px;
}

}

.fs-4{
   font-size: 50px;
}










.nav {
   --bs-nav-link-padding-x: 2.125rem;
   --bs-nav-link-padding-y: 0.75rem;
   --bs-nav-link-font-size:1.0625rem;
   --bs-nav-link-font-weight: ;
   --bs-nav-link-color: #102d47;
   --bs-nav-link-hover-color: #2f73f2;
   --bs-nav-link-disabled-color: #6c757d;
   display: flex;
   flex-wrap: wrap;
   padding-left: 0;
   margin-bottom: 0;
   list-style: none;
 }
 
 .nav-link {
   display: block;
   padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
   font-size: var(--bs-nav-link-font-size);
   font-weight: var(--bs-nav-link-font-weight);
   color: var(--bs-nav-link-color);
   text-decoration: none;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
 }
 @media (prefers-reduced-motion: reduce) {
   .nav-link {
     transition: none;
   }
 }
 .nav-link:hover, .nav-link:focus {
   color: var(--bs-nav-link-hover-color);
 }
 .nav-link.disabled {
   color: var(--bs-nav-link-disabled-color);
   pointer-events: none;
   cursor: default;
 }
 
 .nav-tabs {
   --bs-nav-tabs-border-width: 0;
   --bs-nav-tabs-border-color: #dee2e6;
   --bs-nav-tabs-border-radius: 0;
   --bs-nav-tabs-link-hover-border-color: #e9ecef #e9ecef #dee2e6;
   --bs-nav-tabs-link-active-color: #102d47;
   --bs-nav-tabs-link-active-bg: #fff;
   --bs-nav-tabs-link-active-border-color: #dee2e6 #dee2e6 #fff;
   border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
 }
 .nav-tabs .nav-link {
   margin-bottom: calc(var(--bs-nav-tabs-border-width) * -1);
   background: none;
   border: var(--bs-nav-tabs-border-width) solid transparent;
   border-top-left-radius: var(--bs-nav-tabs-border-radius);
   border-top-right-radius: var(--bs-nav-tabs-border-radius);
 }
 .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
   isolation: isolate;
   border-color: var(--bs-nav-tabs-link-hover-border-color);
 }
 .nav-tabs .nav-link.disabled, .nav-tabs .nav-link:disabled {
   color: var(--bs-nav-link-disabled-color);
   background-color: transparent;
   border-color: transparent;
 }
 .nav-tabs .nav-link.active,
 .nav-tabs .nav-item.show .nav-link {
   color: var(--bs-nav-tabs-link-active-color);
   background-color: var(--bs-nav-tabs-link-active-bg);
   border-color: var(--bs-nav-tabs-link-active-border-color);
 }
 .nav-tabs .dropdown-menu {
   margin-top: calc(var(--bs-nav-tabs-border-width) * -1);
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
 
 .nav-pills {
   --bs-nav-pills-border-radius: 0;
   --bs-nav-pills-link-active-color: #fff;
   --bs-nav-pills-link-active-bg: #2f73f2;
 }
 .nav-pills .nav-link {
   background: none;
   border: 0;
   border-radius: var(--bs-nav-pills-border-radius);
 }
 .nav-pills .nav-link:disabled {
   color: var(--bs-nav-link-disabled-color);
   background-color: transparent;
   border-color: transparent;
 }
 .nav-pills .nav-link.active,
 .nav-pills .show > .nav-link {
   color: var(--bs-nav-pills-link-active-color);
   background-color: var(--bs-nav-pills-link-active-bg);
 }
 
 .nav-fill > .nav-link,
 .nav-fill .nav-item {
   flex: 1 1 auto;
   text-align: center;
 }
 
 .nav-justified > .nav-link,
 .nav-justified .nav-item {
   flex-basis: 0;
   flex-grow: 1;
   text-align: center;
 }
 
 .nav-fill .nav-item .nav-link,
 .nav-justified .nav-item .nav-link {
   width: 100%;
 }
 
 .tab-content > .tab-pane {
   display: none;
 }
 .tab-content > .active {
   display: block;
 }
 
 .navbar {
   --bs-navbar-padding-x: 0;
   --bs-navbar-padding-y: 0.5rem;
   --bs-navbar-color: rgba(0, 0, 0, 0.55);
   --bs-navbar-hover-color: rgba(0, 0, 0, 0.7);
   --bs-navbar-disabled-color: rgba(0, 0, 0, 0.3);
   --bs-navbar-active-color: rgba(0, 0, 0, 0.9);
   --bs-navbar-brand-padding-y: 0.5625rem;
   --bs-navbar-brand-margin-end: 1rem;
   --bs-navbar-brand-font-size: 1.25rem;
   --bs-navbar-brand-color: rgba(0, 0, 0, 0.9);
   --bs-navbar-brand-hover-color: rgba(0, 0, 0, 0.9);
   --bs-navbar-nav-link-padding-x: 0.5rem;
   --bs-navbar-toggler-padding-y: 0.25rem;
   --bs-navbar-toggler-padding-x: 0.75rem;
   --bs-navbar-toggler-font-size: 1.25rem;
   --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
   --bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.1);
   --bs-navbar-toggler-border-radius: 5px;
   --bs-navbar-toggler-focus-width: 0.25rem;
   --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
   position: relative;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
 }
 .navbar > .container,
 .navbar > .container-fluid,
 .navbar > .container-sm,
 .navbar > .container-md,
 .navbar > .container-lg,
 .navbar > .container-xl {
   display: flex;
   flex-wrap: inherit;
   align-items: center;
   justify-content: space-between;
 }
 .navbar-brand {
   padding-top: var(--bs-navbar-brand-padding-y);
   padding-bottom: var(--bs-navbar-brand-padding-y);
   margin-right: var(--bs-navbar-brand-margin-end);
   font-size: var(--bs-navbar-brand-font-size);
   color: var(--bs-navbar-brand-color);
   text-decoration: none;
   white-space: nowrap;
 }
 .navbar-brand:hover, .navbar-brand:focus {
   color: var(--bs-navbar-brand-hover-color);
 }
 
 .navbar-nav {
   --bs-nav-link-padding-x: 0;
   --bs-nav-link-padding-y: 0.75rem;
   --bs-nav-link-color: var(--bs-navbar-color);
   --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
   --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
   display: flex;
   flex-direction: column;
   padding-left: 0;
   margin-bottom: 0;
   list-style: none;
 }
 .navbar-nav .show > .nav-link,
 .navbar-nav .nav-link.active {
   color: var(--bs-navbar-active-color);
 }
 .navbar-nav .dropdown-menu {
   position: static;
 }

 .container-fluid{
 padding-right: 15px;
    padding-left: 15px;
    margin-right: 1px;
    margin-left: 1px;
  }

 .navbar-text {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
   color: var(--bs-navbar-color);
 }
 .navbar-text a,
 .navbar-text a:hover,
 .navbar-text a:focus {
   color: var(--bs-navbar-active-color);
 }
 
 .navbar-collapse {
   flex-basis: 100%;
   flex-grow: 1;
   align-items: center;
 }
 
 .navbar-toggler {
   padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
   font-size: var(--bs-navbar-toggler-font-size);
   line-height: 1;
   color: var(--bs-navbar-color);
   background-color: transparent;
   border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
   border-radius: var(--bs-navbar-toggler-border-radius);
   transition: var(--bs-navbar-toggler-transition);
 }
 @media (prefers-reduced-motion: reduce) {
   .navbar-toggler {
     transition: none;
   }
 }
 .navbar-toggler:hover {
   text-decoration: none;
 }
 .navbar-toggler:focus {
   text-decoration: none;
   outline: 0;
   box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width);
 }
 
 .navbar-toggler-icon {
   display: inline-block;
   width: 1.5em;
   height: 1.5em;
   vertical-align: middle;
   background-image: var(--bs-navbar-toggler-icon-bg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: 100%;
 }
 
 .navbar-nav-scroll {
   max-height: var(--bs-scroll-height, 75vh);
   overflow-y: auto;
 }
 
 @media (min-width: 576px) {
   .navbar-expand-sm {
     flex-wrap: nowrap;
     justify-content: flex-start;
   }
   .navbar-expand-sm .navbar-nav {
     flex-direction: row;
   }
   .navbar-expand-sm .navbar-nav .dropdown-menu {
     position: absolute;
   }
   .navbar-expand-sm .navbar-nav .nav-link {
     padding-right: var(--bs-navbar-nav-link-padding-x);
     padding-left: var(--bs-navbar-nav-link-padding-x);
   }
   .navbar-expand-sm .navbar-nav-scroll {
     overflow: visible;
   }
   .navbar-expand-sm .navbar-collapse {
     display: flex !important;
     flex-basis: auto;
   }
   .navbar-expand-sm .navbar-toggler {
     display: none;
   }
   .navbar-expand-sm .offcanvas {
     position: static;
     z-index: auto;
     flex-grow: 1;
     width: auto !important;
     height: auto !important;
     visibility: visible !important;
     background-color: transparent !important;
     border: 0 !important;
     transform: none !important;
     transition: none;
   }
   .navbar-expand-sm .offcanvas .offcanvas-header {
     display: none;
   }
   .navbar-expand-sm .offcanvas .offcanvas-body {
     display: flex;
     flex-grow: 0;
     padding: 0;
     overflow-y: visible;
   }
 }
 @media (min-width: 768px) {
   .navbar-expand-md {
     flex-wrap: nowrap;
     justify-content: flex-start;
   }
   .navbar-expand-md .navbar-nav {
     flex-direction: row;
   }
   .navbar-expand-md .navbar-nav .dropdown-menu {
     position: absolute;
   }
   .navbar-expand-md .navbar-nav .nav-link {
     padding-right: var(--bs-navbar-nav-link-padding-x);
     padding-left: var(--bs-navbar-nav-link-padding-x);
   }
   .navbar-expand-md .navbar-nav-scroll {
     overflow: visible;
   }
   .navbar-expand-md .navbar-collapse {
     display: flex !important;
     flex-basis: auto;
   }
   .navbar-expand-md .navbar-toggler {
     display: none;
   }
   .navbar-expand-md .offcanvas {
     position: static;
     z-index: auto;
     flex-grow: 1;
     width: auto !important;
     height: auto !important;
     visibility: visible !important;
     background-color: transparent !important;
     border: 0 !important;
     transform: none !important;
     transition: none;
   }
   .navbar-expand-md .offcanvas .offcanvas-header {
     display: none;
   }
   .navbar-expand-md .offcanvas .offcanvas-body {
     display: flex;
     flex-grow: 0;
     padding: 0;
     overflow-y: visible;
   }
 }
 @media (min-width: 992px) {
   .navbar-expand-lg {
     flex-wrap: nowrap;
     justify-content: flex-start;
   }
   .navbar-expand-lg .navbar-nav {
     flex-direction: row;
   }
   .navbar-expand-lg .navbar-nav .dropdown-menu {
     position: absolute;
   }
   .navbar-expand-lg .navbar-nav .nav-link {
     padding-right: var(--bs-navbar-nav-link-padding-x);
     padding-left: var(--bs-navbar-nav-link-padding-x);
   }
   .navbar-expand-lg .navbar-nav-scroll {
     overflow: visible;
   }
   .navbar-expand-lg .navbar-collapse {
     display: flex !important;
     flex-basis: auto;
   }
   .navbar-expand-lg .navbar-toggler {
     display: none;
   }
   .navbar-expand-lg .offcanvas {
     position: static;
     z-index: auto;
     flex-grow: 1;
     width: auto !important;
     height: auto !important;
     visibility: visible !important;
     background-color: transparent !important;
     border: 0 !important;
     transform: none !important;
     transition: none;
   }
   .navbar-expand-lg .offcanvas .offcanvas-header {
     display: none;
   }
   .navbar-expand-lg .offcanvas .offcanvas-body {
     display: flex;
     flex-grow: 0;
     padding: 0;
     overflow-y: visible;
   }
 }
 @media (min-width: 1200px) {
   .navbar-expand-xl {
     flex-wrap: nowrap;
     justify-content: flex-start;
   }
   .navbar-expand-xl .navbar-nav {
     flex-direction: row;
   }
   .navbar-expand-xl .navbar-nav .dropdown-menu {
     position: absolute;
   }
   .navbar-expand-xl .navbar-nav .nav-link {
     padding-right: var(--bs-navbar-nav-link-padding-x);
     padding-left: var(--bs-navbar-nav-link-padding-x);
   }
   .navbar-expand-xl .navbar-nav-scroll {
     overflow: visible;
   }
   .navbar-expand-xl .navbar-collapse {
     display: flex !important;
     flex-basis: auto;
   }
   .navbar-expand-xl .navbar-toggler {
     display: none;
   }
   .navbar-expand-xl .offcanvas {
     position: static;
     z-index: auto;
     flex-grow: 1;
     width: auto !important;
     height: auto !important;
     visibility: visible !important;
     background-color: transparent !important;
     border: 0 !important;
     transform: none !important;
     transition: none;
   }
   .navbar-expand-xl .offcanvas .offcanvas-header {
     display: none;
   }
   .navbar-expand-xl .offcanvas .offcanvas-body {
     display: flex;
     flex-grow: 0;
     padding: 0;
     overflow-y: visible;
   }
 }
 @media (min-width: 1400px) {
   .navbar-expand-xxl {
     flex-wrap: nowrap;
     justify-content: flex-start;
   }
   .navbar-expand-xxl .navbar-nav {
     flex-direction: row;
   }
   .navbar-expand-xxl .navbar-nav .dropdown-menu {
     position: absolute;
   }
   .navbar-expand-xxl .navbar-nav .nav-link {
     padding-right: var(--bs-navbar-nav-link-padding-x);
     padding-left: var(--bs-navbar-nav-link-padding-x);
   }
   .navbar-expand-xxl .navbar-nav-scroll {
     overflow: visible;
   }
   .navbar-expand-xxl .navbar-collapse {
     display: flex !important;
     flex-basis: auto;
   }
   .navbar-expand-xxl .navbar-toggler {
     display: none;
   }
   .navbar-expand-xxl .offcanvas {
     position: static;
     z-index: auto;
     flex-grow: 1;
     width: auto !important;
     height: auto !important;
     visibility: visible !important;
     background-color: transparent !important;
     border: 0 !important;
     transform: none !important;
     transition: none;
   }
   .navbar-expand-xxl .offcanvas .offcanvas-header {
     display: none;
   }
   .navbar-expand-xxl .offcanvas .offcanvas-body {
     display: flex;
     flex-grow: 0;
     padding: 0;
     overflow-y: visible;
   }
 }
 .navbar-expand {
   flex-wrap: nowrap;
   justify-content: flex-start;
 }
 .navbar-expand .navbar-nav {
   flex-direction: row;
 }
 .navbar-expand .navbar-nav .dropdown-menu {
   position: absolute;
 }
 .navbar-expand .navbar-nav .nav-link {
   padding-right: var(--bs-navbar-nav-link-padding-x);
   padding-left: var(--bs-navbar-nav-link-padding-x);
 }
 .navbar-expand .navbar-nav-scroll {
   overflow: visible;
 }
 .navbar-expand .navbar-collapse {
   display: flex !important;
   flex-basis: auto;
 }
 .navbar-expand .navbar-toggler {
   display: none;
 }
 .navbar-expand .offcanvas {
   position: static;
   z-index: auto;
   flex-grow: 1;
   width: auto !important;
   height: auto !important;
   visibility: visible !important;
   background-color: transparent !important;
   border: 0 !important;
   transform: none !important;
   transition: none;
 }
 .navbar-expand .offcanvas .offcanvas-header {
   display: none;
 }
 .navbar-expand .offcanvas .offcanvas-body {
   display: flex;
   flex-grow: 0;
   padding: 0;
   overflow-y: visible;
 }
 
 .navbar-dark {
   --bs-navbar-color: rgba(255, 255, 255, 0.55);
   --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
   --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
   --bs-navbar-active-color: #fff;
   --bs-navbar-brand-color: #fff;
   --bs-navbar-brand-hover-color: #fff;
   --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
   --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
 }
 

.card-body{
  justify-content: center;
  align-items: center;
 }