@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap');

:root{
	--orange-color: #D57C1C;
	--blue-color: #1F5AA0;
	--gray-color: #f2f2f2;
}

/*------------------------------------------------------------- Body Style -------------------------------------------------------------*/

body {font:  400 17px/1.6 'Cairo', sans-serif; color: #444; background-color: #f2f2f2}
header a,header a:hover, footer a,footer a:hover, a ,a:hover ,a:focus {color: var(--orange-color); outline: none; text-decoration: unset;}
a {color: var(--blue-color)}
.bg-blue a,.bg-orange a {color: #fff; text-decoration: underline}
.link {color: var(--blue-color); font-weight: 600; text-decoration: underline;}
.link:hover {text-decoration: underline;}
.bg-blue .link,.bg-orange .link {color: #fff;}
.bg-blue .link:hover,.bg-orange .link:hover {color: #fff; opacity: 0.8}

header ul,footer ul {list-style-type: none; padding: 0; margin: 0;}
ul {list-style-type: square; padding-left: 22px;}
ul li {padding-bottom: 3px}
ul li::marker {font-size: 13px}

h1,h2,h3,h4,h5,h6,.display-4 {font-weight: 700; margin-bottom: 15px;}
h1, h2, h3, h4 {color: var(--blue-color);}
h4 {font-size: 20px}
h5 {font-size: 18px; text-transform: uppercase}
p {margin-bottom: 15px;}
.display-4 {font-size: 32px; line-height: 1;}
.large-text {font-size: 18px}

i:before {vertical-align: -0.175em;}

@media(min-width: 992px){
	h4 {font-size: 22px}
}

/*------------------------------------------------------------- End -------------------------------------------------------------*/
/*------------------------------------------------------------- Button Style -------------------------------------------------------------*/

.btn {padding: 10px 25px!important; font-weight: 600!important; border-radius: 35px!important; transition: all 0.4s!important; text-decoration: unset!important; letter-spacing: 0.3px!important;}
.btn:focus {color: #fff!important; background-color: var(--orange-color)!important; box-shadow: unset!important;}
.btn:hover {text-decoration: unset}
.btn-orange {background-color: var(--orange-color)!important; color: #fff!important;}
.btn-orange:hover {background-color: var(--blue-color)!important; color: #fff!important;}
.btn-white {background-color: transparent!important; color: #fff!important; border: 1.5px solid #fff!important;}
.btn-white:hover {background-color: #fff!important; color: #444!important; opacity: 1!important;}

.small-text {font-size: 20px; margin-bottom: 15px; text-transform: uppercase; color: var(--orange-color);}

/*------------------------------------------------------------- End -------------------------------------------------------------*/
/*------------------------------------------------------------- Color -------------------------------------------------------------*/

.bg-blue {background-color: var(--blue-color); color: #fff}
.bg-orange {background-color: var(--orange-color); color: #fff}
.banner h2,.banner h3,.bg-blue h2, .bg-blue h3, .bg-blue h4,.bg-blue .small-text,.products h3 {color: #fff;}
.bg-orange h2, .bg-orange h3, .bg-orange h4 {color: #fff;}
.banner {color: #fff; background-color: #ddd}

@media(max-width: 400px){
	.products h1 br {display: none!important}
}
/*------------------------------------------------------------- End -------------------------------------------------------------*/
/*------------------------------------------------------------- Row Col & Marign Padding -------------------------------------------------------------*/

.section-padding {padding: 60px 0}

.row-col-gap-24 .col-lg-6,
.row-col-gap-24 .col-lg-4,
.row-col-gap-24 .col-lg-3 {
	margin-bottom: 24px!important;
}

.row-col-gap-24 {margin-bottom: -24px}
.row-revers-md {flex-wrap: wrap-reverse;}
.row-revers-lg {flex-wrap: wrap-reverse;}
.margin-md {margin-bottom: 30px}
.margin-lg {margin-bottom: 30px}
.margin-xl {margin-bottom: 20px}
.margin-gap {margin-bottom: 30px}
.margin-left {margin-left: 20px;}

@media(min-width: 768px){
	.row-revers-md {flex-wrap: wrap;}
	.margin-md {margin-bottom: 0}
	.margin-left {margin-left: 40px}
}

@media(min-width: 992px){
	.large-text {font-size: 20px!important; font-weight: 400!important}
	.section-padding {padding: 100px 0}
	.margin-lg {margin-bottom: 0}
	.row-revers-lg {flex-wrap: wrap;}
	.margin-gap {margin-bottom: 50px}
	.display-4 {font-size: calc(1.5rem + 2vw)}
}

@media(min-width: 1200px){
	h1,h2,h3,h4,h5,h6,.display-4 {margin-bottom: 20px;}
	p {margin-bottom: 20px;}	
	.section-padding {padding: 120px 0}
	.margin-left {margin-left: 100px;}
}

/*------------------------------------------------------------- End -------------------------------------------------------------*/
/*------------------------------------------------------------- Image Zoom Effect -------------------------------------------------------------*/

.zoom-img {overflow: hidden}
.zoom-img img {transition: all 0.5s}
.zoom-img:hover img {transform: scale(1.04)}

/*------------------------------------------------------------- End -------------------------------------------------------------*/
/*------------------------------------------------------------- Header -------------------------------------------------------------*/

.header-stiky {position: sticky; top: 0;z-index: 999;}
.overlay {position: fixed; top: 0; right: 100%; left: 0; bottom: 0; background-color: rgb(0, 0, 0,0.8); z-index: 996;}
#menu {position: fixed; top: 0; right: -100%; bottom: 0; background-color: var(--blue-color); width: 100%; box-shadow: 3px 3px 8px black; transition: all 0.5s; overflow-y: auto; z-index: 999; }
.menu-heading {background-color: #fff; margin: 15px; padding: 12px 15px 12px 12px;}

@media(min-width: 576px){
	#menu {width: 350px;}
}

.active-header header {border: 1px solid #e1e1e1}
.header-flex {display: flex; justify-content: space-between; align-items: center;}
header {background-color: #fff; margin: 15px; padding: 12px 0; position: absolute; top: 0; left: 0; right: 0; z-index: 996; border: 1px solid transparent}
header ul li a {padding: 15px; display: block; color: #fff; font-size: 15px}
header .btn-orange {font-size: 15px}
header .iso b {font-size:15px; color: var(--blue-color)}
header ul li a:focus {color: #fff;}
.left img {width: 120px;}
.right {display: none}
.clsoe-icon {width: unset!important; max-width: unset!important}
header .social-icon i:before {color: #fff; border-color: #fff;}
header .social-icon {padding: 15px}

@media(min-width: 1024px){
	#menu {position: static; width: unset; box-shadow: unset; background-color: transparent; overflow: unset;}
	header ul li {display: inline-block;}
	header ul li a {margin-right: 8px; padding: 0; color: #444;}
	header ul li a:focus {color: var(--orange-color);}
	.left,.right  {display: flex; align-items: center;}
	.header-border {border-left: 1px solid #dfdfdf; height: 40px; display: inline-block; margin: 0 10px;}
	.mobile-only {display: none!important}
	.left img {width: 100px}
	.overlay {display: none}
}

@media(max-width: 1200px){
	.contact-button  {padding: 8px 20px!important}
}

@media(min-width: 1200px){
	header {margin: 20px; padding: 10px}
	header ul li a {margin-right: 15px; font-size: 16px}
	header .iso b {font-size: 16px}
	header .btn-orange {font-size: 16px}
	.left img {width: 100px}
	.header-border {margin: 0 15px}
}

@media(min-width: 1400px){
	header {padding: 12px 38px}
	header ul li a {margin-right: 20px;}
	.header-border {margin: 0 20px}
	.left img {width: 120px}
}

@media(max-width: 1024px){
	header .contact-button {display: none;}
	header .iso {display: none!important}
	header {padding: 6px 0}
}

/*------------------------------------------------------------- End -------------------------------------------------------------*/
/*------------------------------------------------------------- DropDown Menu -------------------------------------------------------------*/

@media(max-width: 991px){
	.navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse{
		overflow-y: auto;
		max-height: 90vh;
		margin-top:10px;
	}
}

@media all and (min-width: 992px) {

	header .has-megamenu{position:static!important;}
	header .megamenu {left:0; right:0; width:950px; margin-top:20px!important;}
}	

@media(min-width: 1400px){
	header .megamenu{margin-top: 23px!important}
}

.dropdown-toggle:after {display: none}
.dropdown-toggle.show i {transform: rotate(-180deg); transition: all 0.4s;}
.dropdown-toggle i {display: inline-block;  transition: all 0.4s;}
.dropdown-menu {padding: 0!important; border: 1px solid #dfdfdf; border-radius: 0; border-top: 0!important;}
.dropdown-menu .border-sm {border-right: 1px solid #dfdfdf; padding: 15px; text-align: center; border-top: 1px solid #dfdfdf; height: 100%;}
.dropdown-menu .col-lg-5 .border-sm {display: flex; justify-content: center; align-items: center;}

.dropdown-menu .border-sm:hover img {transform: scale(1.05); text-align: center;}
.dropdown-menu .border-sm img {transition: all 0.5s}
.dropdown-menu .col-12 {border: 1px solid #dfdfdf; padding: 15px 12px;}
.dropdown-menu a {padding: 0; margin: 0; color: #444; text-align: center}
.dropdown-menu a:hover {padding: 0; margin: 0; color: var(--orange-color);}

.dropdown-menu .col-lg-5 img {width: unset!important}

@media only screen and (max-width: 991px){
	.dropdown-menu .border-sm {text-align: left!important;}
	.dropdown-menu {position: static!important; transform: unset!important}
}

@media(max-width: 992px){
	.dropdown-menu .border-sm {height: auto}
}

@media(min-width: 1024px) and (max-width: 1300px){
	.dropdown-menu {left: -4%!important;}
}
/*------------------------------------------------------------- End -------------------------------------------------------------*/
/*------------------------------------------------------------- intro -------------------------------------------------------------*/

.intro h2 {font-size: 20px; margin-bottom: 15px; text-transform: uppercase; color: var(--orange-color);}
.intro p {font-size: 18px; margin-left: 20px}
.intro p:last-child {margin-bottom: 0}
.intro.bg-blue h2 {color: #fff;}

.overview .row .col-lg-6:last-child p:last-child {margin-bottom: 0!important}
.overview .row .col-lg-9 p:last-child,.overview .row .col-lg-8 p:last-child {margin-bottom: 0!important}

@media(min-width: 768px){
	.intro p {margin-left: 40px;}
}

@media(min-width: 992px){
	.overview .row .col-lg-6:first-child p:last-child {margin-bottom: 0!important}
}

@media(min-width: 1200px){
	.intro p {font-size: 20px; margin-left: 100px;}
}

/*------------------------------------------------------------- End -------------------------------------------------------------*/
/*------------------------------------------------------------- Banner -------------------------------------------------------------*/

.banner .swiper-pagination-bullet {width: 20px; border-radius: 5px; background: var(--orange-color); height: 8px; margin: 0 5px!important;}
.banner .banner-image {display: flex; align-items: center; padding: 120px 12px 50px 12px; height: 100%; background-size: cover; background-position: center; overflow: hidden;}
.banner .swiper-pagination {bottom: 15px; right: 0!important; left: unset!important; width: unset; margin-right: 10px;}
.banner .swiper-pagination-bullet-active {width: 30px;}
.banner .border-left {border-left: 8px solid var(--orange-color); padding-left: 20px; margin-left: 30px;}
.banner .row {width: 100%}
.banner .fadeInRight {opacity: 0;transform: translateX(100px);transition: all 900ms ease;}
.banner .fadeInLeft {opacity: 0;transform: translateX(-100px);transition: all 900ms ease;}
.banner .swiper-slide {height: auto;}
.banner .swiper-slide-active .fadeInRight {opacity: 1;transform: translateX(0); transition-delay: 1100ms;}
.banner .swiper-slide-active .fadeInLeft {opacity: 1; transform: translateX(0); transition-delay: 900ms;}
.banner img {margin-bottom: 30px}

.swiper-lazy-preloader {border-color: var(--orange-color)!important;}

@media(min-width: 768px){
	.banner .border-left {margin-left: 0;}
	.banner .banner-image {height: 60vh;}
}

@media(min-width: 992px){
	.banner .swiper-pagination {bottom: 15px; right: 0!important; left: 0!important; width: 100%; margin-right: 0;}
	.banner .banner-image {padding: 170px 12px 100px 12px; height: 100vh;}
	.banner img {margin-bottom: 0}
}

@media(min-width: 1200px){
	.banner .border-left {padding-left: 40px;}
}

/*------------------------------------------------------------- End -------------------------------------------------------------*/
/*------------------------------------------------------------- Products -------------------------------------------------------------*/

.products {overflow: hidden;}
.products .product-jay-logo {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: -1;}
.products .box {position: relative; overflow: hidden;  border-radius: 50%;}
.products .box:after {content: ''; padding-bottom: 100%; width: 100%;}
.products .box img {transition: all 0.4s; width: 100%;}
.products .box a {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: rgb(0, 0, 0,0.3); color: #fff; opacity: 0; transition: all 0.4s;}
.products .box a, .products .box a:hover {text-decoration: unset}
.products .box:hover a {opacity: 1;}
.products .box a h3 {margin-bottom: 0; padding: 20px;}
.products .product-jay-logo img {max-width: 100%!important; width: 100%;}
.product-box {text-align: center; display: inline-block;}

.product-box .zoom-img {position: relative; overflow: hidden; border-radius: 50%; border: 5px solid #ddd; margin-bottom: 20px; transition: all 0.4s}
.product-box .zoom-img:hover {border-color: var(--orange-color)}
.products .swiper-col {margin: 40px 0;}
.products .box {border: 5px solid #ddd; }
.products .swiper-slide-active .box {border: 5px solid var(--orange-color); }

.products .product-jay-logo img {max-width: 130%!important;}
.products .swiper-button-next {right: -1%;}
.products .swiper-button-prev {left: -1%;}

.products .swiper-slide-active {margin-left: 70px; margin-right: 110px!important;}
.products .swiper-wrapper {margin-left: -70px!important;}
.navigation-static .swiper-button-next,.navigation-static .swiper-button-prev {position: static; padding: unset; margin: unset; width: unset; height: unset; display: inline-block}

.swiper-button-prev:after,.swiper-button-next:after {display: none}
.swiper-button-prev .bi-chevron-left:before,.swiper-button-next .bi-chevron-right:before {color: var(--orange-color) ; font-size: 35px;}

.all-products b {display: block; margin-bottom: 10px;}

@media(min-width: 768px){

	.products .product-jay-logo img {max-width: 65%!important;}
	.products .swiper-button-next {right: 18.9%;}
	.products .swiper-button-prev {left: 18.9%;}
}
@media(min-width: 992px){
	.products .swiper-col {margin: 80px 0;}
	.products .product-jay-logo img {max-width: 42%!important;}
	.products .swiper-button-next {right: 29.8%;}
	.products .swiper-button-prev {left: 29.8%;}
}

@media(min-width: 1400px){
	.products .product-jay-logo img {width: 32%!important;}
	.products .swiper-button-next {right: 35.2%;}
	.products .swiper-button-prev {left: 35.2%;}
}

/*------------------------------------------------------------- End -------------------------------------------------------------*/
/*-------------------------------------------------------------  Infrastructure two box up down -------------------------------------------------------------*/

.capabilities img {width: 100%;}
.cap-box {margin-top: -50px; background-color: #fff; padding: 20px; position: relative; z-index: 99;}
.cap-boxup {margin-bottom: 24px} 

.cap-box.gap-left {margin-right: 20px;} 
.cap-box.gap-right {margin-left: 20px;} 

@media(min-width: 768px){
	.cap-box.gap-left {margin-right: 50px;} 
	.cap-box.gap-right {margin-left: 50px;} 
}

@media(min-width: 992px){
	.cap-box {margin-top: -60px;}
	.cap-boxup {margin-top: 80px; margin-bottom: 0}

	.cap-box.gap-left {margin-right: 60px;} 
	.cap-box.gap-right {margin-left: 60px;} 
}

@media(min-width: 1200px){
	.cap-box {margin-top: -100px; padding: 40px;}
	.cap-boxup {margin-top: 120px;}

	.cap-box.gap-left {margin-right: 100px;} 
	.cap-box.gap-right {margin-left: 100px;} 
}

/*------------------------------------------------------------- End -------------------------------------------------------------*/
/*------------------------------------------------------------- Application -------------------------------------------------------------*/

.applications {position: relative; z-index: 1}
.applications:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 30%; background-color: var(--blue-color); z-index: -1;}

.aplication-swiper-inner {position: relative;} 
.application-box {padding: 30px; background-color: #fff; z-index: 992;}

@media(min-width: 768px){
	.applications:before {width: 50%; height: 100%; transition: all 0.8s;}
	.aplication-swiper-inner .application-box {width: 45%; position: absolute; bottom: 0; right: 0; }
}

@media(min-width: 992px){
	.aplication-swiper-inner .application-box {width: 40%; height: unset; right: 0; padding: 40px;}
}

@media(min-width: 768px) and (max-width: 992px){
	.applications {margin-bottom: 60px}
}

@media(max-width: 992px){
	.applications .container {max-width: 98%;}
}

/*------------------------------------------------------------- End -------------------------------------------------------------*/
/*------------------------------------------------------------- Footer -------------------------------------------------------------*/

footer {padding: 100px 0 30px 0; background-color: var(--blue-color); color: #ffffffd1;}
footer a {margin-bottom: 3px; display: block; color: #ffffffd1;}
footer a:hover {color: #fff;}
footer ul li a {display:  block; margin-bottom: 10px;}
.social-icon i:before {border: 1px solid #fff; color: #fff; font-size: 20px; padding: 10px; margin-right: 10px; border-radius: 35px}
.social-icon a {display: inline-block}
footer h5 {margin-top: 20px}
.copyright {display: flex; justify-content: center; flex-direction: column;}

@media(min-width: 768px){
	footer h5 {margin-top: 20px}
	.copyright {display: flex; justify-content: space-between; flex-direction: unset; align-items: center}
}

@media(max-width:992px){
	footer {padding: 50px 0 20px 0}
}

/*------------------------------------------------------------- End -------------------------------------------------------------*/
/*------------------------------------------------------------- Inner banner -------------------------------------------------------------*/

.inner-banner {width: 100%; height: 350px; background-color: #ddd; padding-bottom: 35px; background-position: bottom center; background-size: cover; background-repeat: no-repeat; display: flex; align-items: flex-end;}

@media(min-width: 768px){
	.inner-banner {height: 450px;}
}

@media(min-width: 992px){
	.inner-banner {height: 500px;}
}

@media(min-width: 1200px){
	.inner-banner {height: 600px;}
}

/*------------------------------------------------------------- End -------------------------------------------------------------*/
/*------------------------------------------------------------- Contact us Page -------------------------------------------------------------*/

.form-control:focus {box-shadow: 0 0 0 0.25rem #d57c1c5e; border-color: #d57c1c; background-color: transparent;}
.form-control {margin-top: 5px; background-color: transparent;}
form label {font-weight: 700; text-transform: capabilities;}
form h4 {display: inline-block;}
form .col-md-6 {margin-bottom: 24px}

.contact-info a {color: #fff; text-decoration: unset}
.contact-info a:hover {opacity: 0.8; text-decoration: unset}
.contact-info img {margin-bottom: 20px}
.contact-info .col-12 {margin-bottom: 40px}
.contact-info h5 {margin-bottom: 10px!important}
.contact-info iframe {height: 350px; width: 100%;}
form button {margin-right: 12px}


@media(min-width: 992px){
	.contact-info iframe {height: 600px}
}

/*------------------------------------------------------------- End -------------------------------------------------------------*/
/*------------------------------------------------------------- About page -------------------------------------------------------------*/

.about-content-inner {position: relative; z-index: 1;}
.about-content-inner .box {background-color: #fff; padding: 20px;}
.about-content-inner:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 50%; background-color: var(--blue-color); z-index: -1;}

@media(min-width: 992px){
	.about-content-inner .box {padding: 50px; margin-top: -100px;}
	.about-content-inner:before {width: 50%; height: 100%;}
}

/*------------------------------------------------------------- End -------------------------------------------------------------*/
/*------------------------------------------------------------- Contact Belt -------------------------------------------------------------*/

.contact-belt {padding: 0 12px; position: relative; z-index: 1;}
.contact-belt .col-12 {padding: 20px 20px;}
.contact-belt:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 50%; background-color: #f8f9fa!important; z-index: -1; opacity: 0;}
.contact-belt:after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background-color: var(--blue-color); z-index: -1;}

@media(min-width: 768px){
	.contact-belt .col-12 {display: flex; justify-content: space-between; align-items: center; padding: 30px 50px}
	.contact-belt h4 {margin-right: 24px; width: 65%!important;}
	.contact-belt-button {width: 35%!important; text-align: right}
}

@media(min-width: 992px){
	.contact-belt .col-12 {padding: 50px}
	.contact-belt h4 {width: 75%!important;}
	.contact-belt-button {width: 25%!important;}
}

/*------------------------------------------------------------- End -------------------------------------------------------------*/
/*------------------------------------------------------------- address br none footer and contact -------------------------------------------------------------*/

@media(min-width: 992px) and (max-width: 1400px){
	footer address br {display: none}
}

@media(min-width: 992px) and (max-width: 1200px){
	.contact-info address br {display: none}
}

@media(max-width: 300px){
	.contact-info address br {display: none}
	footer address br {display: none}
}

/*------------------------------------------------------------- End -------------------------------------------------------------*/
/*------------------------------------------------------------- Table & Accordion -------------------------------------------------------------*/


/* -- table search -- */
.fixed-table-body {overflow-y: auto;}
#searchBody tr td:first-child {width: 65px; text-align: center}
.fixed-table-body table tr:last-child td {border-bottom: 0}
.fixed-table-body table thead {position: sticky!important; top: 0}
.table-scroll {height: 350px; overflow-y: auto; border-bottom: 1px solid #e2e2e2;}

.table-responsive {overflow-x: auto; width: 100%;}
.table-responsive table {width: 100%;}

/* -- table -- */
table {width: 100%;}
table thead tr {background-color: var(--orange-color)!important; color: #fff!important;}
table thead th {border-left: 1px solid #e2e2e2; border-right: 1px solid #e2e2e2; padding: 10px!important;}
table td {border: 1px solid #e2e2e2;  padding: 10px!important;}
table tr:nth-child(odd) {background-color: #f2f2f2}
table tbody tr:nth-child(odd) {background-color: #e7e7e7}

/* -- accordion -- */
.accordion button {font-weight: 600}
.accordion {color: #444!important;}

.accordion-button:not(.collapsed) {background-color: var(--orange-color)!important; color: #fff;}
.accordion-button {font-size: 1.4rem!important; font-weight: 700!important; color: #444;}
.accordion-button:not(.collapsed)::after {color: #fff!important; background-image: unset!important; color: var(--blue-color);}
.accordion-button:focus {outline: none; box-shadow: unset}
.accordion-button:after {content: "\f282"; display: inline-block; font-family: bootstrap-icons !important; font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; line-height: 1; vertical-align: -0.125em; -webkit-font-smoothing: antialiased; background-image: unset}
.accordion-body {padding: 15px; background-color: #f9f9f978}

@media(min-width: 992px){

	/* -- table -- */
	.table-scroll {height: 500px;}

	/* -- accordion -- */
	.accordion-body {padding: 30px;}
	.accordion-item td {width: 33.33%;}
}

/*------------------------------------------------------------- End -------------------------------------------------------------*/

.certificate-border {border: 1px solid #000!important; background-color: #ffff}

.mision-vision .bg-white {padding: 20px; height: 100%}

@media(min-width: 992px){
	.mision-vision .bg-white {padding: 40px;}
}

/*------------------------------------------------------------- Gallery -------------------------------------------------------------*/
.gallery-box {height: 100%; background-color: #ddd; background-size: cover; background-repeat: no-repeat; background-position: center; z-index: 99; padding-bottom: 100%; cursor: zoom-in;}
.gallery-box img {display: none!important}
.fancybox-slide {cursor: zoom-out!important;}
.fancybox-thumbs__list a:before {border: 4px solid var(--orange-color)!important;}