/* CSS Document */

html{overflow-x: hidden;}
html,body{font-family: 'Rubik', sans-serif; font-weight: 400; color:va(--bs-primary);     }

:root{
	
	--bs-primary: #0A3E52;
	--bs-primary-rgb:10,62,82;
	--bs-secondary:#E7663C;
	--bs-secondary-rgb:231,102,60;
	--gradient: linear-gradient(-90deg, rgba(10,62,82,1) 0%, rgba(7,45,56,1) 70%);
}


::-webkit-scrollbar {
  width: 8px; border-radius: 4px; height: 8px;
}
 
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 3px #ffff; border-radius: 4px;
}
 
::-webkit-scrollbar-thumb {
  background-color: var(--bs-primary); border-radius: 4px;
}

.sidebar-links::-webkit-scrollbar {
  width: 8px;  border-radius: 4px;
}

.sidebar-links::-webkit-scrollbar-track {
  box-shadow: inset 0 0 3px #ffff; border-radius: 4px;
}

.sidebar-links::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,.03);    border-bottom: 1px solid rgba(0,0,0,.125); border-radius: 4px;
}

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


.bg-gradient-mothers{background: var(--gradient); overflow: hidden; position: relative}
.bg-gradient-mothers:after{content:""; width:50%; height: 100%; right: 0%; top: 0px; position: absolute; background:url("../img/bg.png");}
@media (max-width: 768px) {.bg-gradient-mothers:after{width:30%;}}

.bg-gradient-pattern{ background:url("../img/bg.png"); position: relative;}

.bg-secondary-skew{position: relative}
.bg-secondary-skew:before{z-index: -1; position: absolute; content: ''; height: 100%; width: 100%; left: 0; top: 0; transform: skewY(0deg); background:var(--bs-secondary)}
.bg-footer:before{background-image: url("../img/bg.webp"); background-position: left 200%; background-repeat: no-repeat;}
.bg-footer:after{z-index: -1; position: absolute; content: ''; height: 10px; width: 100%; left: 0; bottom: -5px; transform: skewY(0deg); background:var(--bg-primary)}

.bg-ubsi-skew{position: relative}
.bg-ubsi-skew:before{z-index: -1; position: absolute; content: ''; height: 100%; width: 100%; left: 0; top: 0; transform: skewY(0deg); background:var(--bg-primary)}


.btn-tco, .btn-primary, .btn-dark{
	position: relative;
	background-color: #2C2661!important;
	color:#fff;
    --bs-btn-color: #fff;
    --bs-btn-bg: #2C2661;
    --bs-btn-border-color: #2C2661;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6CC3CA;
    --bs-btn-hover-border-color: #6CC3CA;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6CC3CA;
    --bs-btn-active-border-color: #6CC3CA;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--bg-primary);
    --bs-btn-disabled-border-color: var(--bg-primary);
}
/*
.btn-bg-primary:before{
	content:'';
	position: absolute;
	z-index: -1;
	top:0;
	left: -5%;
	width: 110%;
	height: 100%;
	transform: skewX(-20deg);
	background:var(--bg-primary);
	
}
.btn-bg-primary:hover:before, .btn-ubsi:active:before{
	background:var(--bg-primary-hover);
}
*/
.btn-dark{
	position: relative;
	--bs-btn-hover-color: var(--bg-primary);
}
.btn-dark:before{
	content:'';
	position: absolute;
	z-index: -1;
	top:0;
	left: -5%;
	width: 110%;
	height: 100%;
	transform: skewX(-20deg);
	background:#212529;
	
}
.btn-dark:hover:before{
	background:#424649;
}
.btn-bg-primary:active:before{
	background:#4d5154;
}


.text-bg-primary{color: var(--bg-primary)}

.float-title{transform: translateY(-200px); margin-bottom: -200px;}

@media only screen and (max-width: 1024px) {
	.float-title{transform: translateY(0px); margin-bottom:0px;}
}

.logo-primary{}
.logo-ag{ transform: translateY(-75%);}

@media only screen and (max-width: 1024px) {
	.logo-primary{}
}

@media (max-width: 768px) {
	
	.fs-5{font-size: 1rem!important}
	
}


.form-check-input{
	background-color: #fff;
}

.form-check-input:checked {
    background-color: #2C2661;
    border-color: #2C2661;
}
.form-control:focus {
	
	    border-color: #2C2661;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(44,38,97,.25);
}

  
  
.f-carousel {
  --f-carousel-spacing: 15px;
  --f-carousel-slide-width: 100%;
}

@media (min-width: 768px) {
  .f-carousel {
	--f-carousel-slide-width: calc((100% - 30px) / 3);
  }
}