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

:root{
	/* <!--------------- Color ---------------!> */
	--body-bg-white-color: #ffffff;
	--body-bg-light-gray-color: #2b2b30;
	--body-bg-dark-gray-color: #25252a;
	--footer-bg-color: #28282c;
	
	--red-color: #eb3031;
	--white-text-color: #ffffff;
	--light-text-color: #9e9ea2;

	--border-dark-color: #ffffff20;
	--border-white-color: #ffffff;

	--glass-dots-color: #eb3031;

	/* <!--------------- Font ---------------!> */
	--body-font-size: 16px;
	--lg-text: 20px;

	--fw-300: 300;
	--fw-600: 600;
	--fw-700: 700;

	--body-line-height: 1.6;
	--heading-line-height: 1.2;

	--heading-margin-bottom: 8px;

	/* <!--------------- Padding & Margin ---------------!> */
	--section-padding: 60px;
	--section-padding-lg: 60px 20px;
	--section-padding-md: var(--section-padding-lg);
	--section-padding-sm: var(--section-padding-lg);
	--section-padding-xs: 30px 20px;
	
	--mb-15: 15px;
	--mb-30: 15px;
	--mb-60: 30px;

	--p-30: 30px 20px;
	--p-60: 30px 20px;
	--py-30: 15px;

	--btn-padding: 0.75rem 1.5rem;
	--btn-arrow-width: 55px;

	/* <!--------------- Button Style  ---------------!> */

	--btn-padding: 0.75rem 1.5rem;
	--btn-arrow-width: 55px;

	--btn-red-color: var(--red-color);
	--btn-red-border-color: var(--red-color);
	--btn-red-color-hover: var(--white-text-color);
	--btn-red-bg-color-hover: var(--red-color);

	--btn-white-color: var(--white-text-color);
	--btn-white-border-color: var(--border-white-color);
	--btn-white-color-hover: var(--light-text-color);
	--btn-white-bg-color-hover: var(--white-text-color);

	--header-padding-gap: 20px;

	--banner-height: 500px;
	--banner-title-2: calc(1.55rem + 2.8vw);
	--banner-title-2-large: calc(2.8rem + 4vw);
}

@media(min-width: 768px){
	:root{
		/* <!--------------- Padding & Margin ---------------!> */
		--section-padding-lg: 60px 30px;
		--p-60: 30px;

		--header-padding-gap: 36px;

		--banner-height: 600px;
		--banner-title-2: calc(3.5rem + 4.5vw);
		--banner-title-2-large: calc(4.2rem + 5.7vw);
	}
}

@media(min-width: 992px){
	:root{
		/* <!--------------- Font ---------------!> */
		--body-font-size: 18px;
		--lg-text: 22px;

		--heading-margin-bottom: 1rem;

		/* <!--------------- Padding & Margin ---------------!> */
		--section-padding: 90px;
		--section-padding-lg: 90px 60px;
		--section-padding-md: 90px 30px;
		--section-padding-sm: 90px 30px;

		--mb-30: 30px;
		--mb-60: 60px;
		--p-30: 30px;
		--py-30: 30px;

		/* <!--------------- Button Style ---------------!> */
		--btn-padding: 0.75rem 3rem;
		--btn-arrow-width: 70px;

		--banner-height: 100vh;
		--banner-header-height-minus: 112.8px;
		
	}
}

@media(min-width: 1400px){
	:root {
		--header-padding-gap: 40px;
	}

}
@media(min-width: 1400px){
	:root{

		/* <!--------------- Padding & Margin ---------------!> */
		--section-padding: 120px;
		--section-padding-lg: 120px 90px;
		--section-padding-md: 120px 60px;
		--section-padding-sm: 120px 30px;
		--section-padding-xs: 60px 30px;

		--p-60: 60px;

		--header-padding-gap: 60px;

		--banner-header-height-minus: 160.8px;
	}
}

@media(min-width: 1600px){
	:root{

		/* <!--------------- Padding & Margin ---------------!> */
		--section-padding-lg: 120px 150px;
		--section-padding-sm: 120px 60px;
	}
}

/* <!--------------- Font ---------------!> */

html {scroll-behavior: smooth;}
body {font: var(--fw-300) var(--body-font-size)/var(--body-line-height) 'Poppins', sans-serif; color: var(--light-text-color); background-color: var(--body-bg-dark-gray-color); overflow-x: hidden;}
.grecaptcha-badge {visibility: hidden;}

ul {padding: 0; margin: 0; list-style-type: none}
a , a:hover , a:focus {text-decoration: none!important; outline: none!important;}
a {color: var(--white-text-color);}
a:hover {color: var(--red-color);}
button:focus {outline: unset!important}
button:disabled {opacity: 0.8;}
[onclick]:hover {cursor: pointer}

h1, h2, h3, h4, h5, h6 {color: var(--white-text-color); font-weight: var(--fw-700)!important; margin-bottom: var(--heading-margin-bottom); line-height: var(--heading-line-height)!important;}
.lg-text {font-size: var(--lg-text);}
h4 + hr {margin-bottom: var(--heading-margin-bottom); margin-top: 0}
hr.white {opacity: 0.8}

/* <!--------------- Load Box ---------------!> */

.loadBox1, .loadBox2, .loadBox3, .loadBox4 {display: none}
.p-last-0 p:last-child {margin-bottom: 0}

/* <!--------------- Loader Box image ---------------!> */
.loader-box {width: 100%; height: 100%; position: relative; z-index: 1;}
.loader-box img {z-index: 1;}
.loader-box:before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(../images/loader.svg); background-size: 50px; background-repeat: no-repeat; background-position: center; animation: spin 1.5s linear infinite; z-index: -1;}
.loader-box.rounded {border-radius: 2%!important}

/* <!--------------- Padding & Margin ---------------!> */

.section-padding {padding: var(--section-padding) 0;}
.container.section-padding {padding-left: 12px; padding-right: 12pxx}
.section-padding-lg {padding: var(--section-padding-lg);}
.section-padding-md {padding: var(--section-padding-md);}
.section-padding-sm {padding: var(--section-padding-sm);}
.section-padding-xs {padding: var(--section-padding-xs);}
.mb-15 {margin-bottom: var(--mb-15);}
.mt-15 {margin-top: var(--mb-15);}
.mb-30 {margin-bottom: var(--mb-30);}
.mb-60 {margin-bottom: var(--mb-60);}
.p-60 {padding: var(--p-60);}
.p-30 {padding: var(--p-30);}
.py-30 {padding-top: var(--py-30)!important; padding-bottom: var(--py-30)!important;}

@media(max-width: 340px){
	.mt-xs-3 {margin-top: 15px}
	.ms-xs-0 {margin-left: 0!important}
}

/* <!--------------- Border style ---------------!> */

.row.border-top, .row.border-bottom, .border-top-bottom, .border-top, .border-right, .border-bottom, .border-left, .border-center-md {overflow: hidden;}
.border-top-bottom {border-top: 2px solid var(--border-dark-color); border-bottom: 2px solid var(--border-dark-color);}

.border-top {border-top: 2px solid var(--border-dark-color)!important;}
.border-right {border-right: 2px solid var(--border-dark-color)!important;}
.border-bottom {border-bottom: 2px solid var(--border-dark-color)!important;}
.border-left {border-left: 2px solid var(--border-dark-color)!important;}

.border-left-top-lg, .border-left-top-md, .border-left-top-xl {border-top: 2px solid var(--border-dark-color);}
.border-left-bottom-lg, .border-left-bottom-md {border-bottom: 2px solid var(--border-dark-color);}

@media(min-width: 768px){

	.border-center-md {position: relative;}
	.border-center-md:before {content: ''; position: absolute; top: 0; left: calc(50% - 1px); width: 2px; height: 100%; background-color: var(--border-dark-color)}

	.border-left-top-md, .border-left-bottom-md {border: unset; position: relative;}
	.border-left-top-md:after, .border-left-bottom-md:after {content: ''; position: absolute; top: 0; left: 0; border-left: 2px solid var(--border-dark-color); transform: scaleY(6); height: 100%;}

	.border-top-md {border-top: 2px solid var(--border-dark-color)!important;}
	.border-right-md {border-right: 2px solid var(--border-dark-color)!important;}
	.border-bottom-md {border-bottom: 2px solid var(--border-dark-color)!important;}
	.border-left-md {border-left: 2px solid var(--border-dark-color)!important;}
}

@media(min-width: 992px){
	.border-left-top-lg, .border-left-bottom-lg {border: unset; position: relative;}
	.border-left-top-lg:after, .border-left-bottom-lg:after {content: ''; position: absolute; top: 0; left: 0; border-left: 2px solid var(--border-dark-color); transform: scaleY(6); height: 100%;}

	.border-top-lg {border-top: 2px solid var(--border-dark-color)!important;}
	.border-right-lg {border-right: 2px solid var(--border-dark-color)!important;}
	.border-bottom-lg {border-bottom: 2px solid var(--border-dark-color)!important;}
	.border-left-lg {border-left: 2px solid var(--border-dark-color)!important;}
	.border-left-lg-0 {border-left: unset!important;}	
}

@media(min-width: 1200px){
	.border-left-xl {border-left: 2px solid var(--border-dark-color)!important;}
	.border-left-top-xl {position: relative;}
	.border-left-top-xl:after {content: ''; position: absolute; top: 0; left: 0; border-left: 2px solid var(--border-dark-color); transform: scaleY(6); height: 100%;}
}

/* <!--------------- Button Style ---------------!> */

.btn-red, .btn-white {font-size: var(--body-font-size)!important; font-weight: var(--fw-600)!important; line-height: var(--body-line-height)!important; border: 1px solid; padding: var(--btn-padding)!important; display: inline-block!important; background-color: transparent!important; transition: 0.15s ease-out!important;}
.btn-red {color: var(--btn-red-color)!important; border-color: var(--btn-red-border-color)!important;}
.btn-red:hover:not(:disabled), .btn-red.active {color: var(--btn-red-color-hover)!important; background-color: var(--btn-red-bg-color-hover)!important;}
.btn-white {color: var(--btn-white-color)!important; border-color: var(--btn-white-border-color)!important;}
.btn-white:hover, .btn-white.active {color: var(--btn-white-color-hover)!important; background-color: var(--btn-white-bg-color-hover)!important;}

.btn-arrow {width: var(--btn-arrow-width)!important; transition: all 0.15s linear!important;}
.btn-arrow:hover {transform: translateX(8px)!important;}

/* <!--------------- Bottom to Top Button ---------------!> */

#myBtn {position: fixed; bottom: 25px; right: 25px; z-index: 99; border: none; outline: none; background-color: var(--red-color)!important; color: var(--white-text-color); cursor: pointer; padding: 10px; border-radius: 4px; transition: all 0.15s linear; transform: translateY(80px); box-shadow: 0 0 12px rgb(0, 0, 0, 0.2);}
#myBtn:hover {transform: translate(0, 0), scale(1.1)!important;}

/* <!--------------- Color / BackgroundColor ---------------!> */

.bg-light {background-color: var(--body-bg-light-gray-color)!important;}
.text-red {color: var(--red-color);}

/* <!--------------- Row Col ---------------!> */

.row-revers-lg {flex-wrap: wrap-reverse;}

@media(max-width: 767px){
	.row-revers-md {flex-wrap: wrap-reverse;}
	.row {margin-left: -20px; margin-right: -20px;}
	.row>* {padding-left: 20px; padding-right: 20px;}
	.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {padding-left: 20px; padding-right: 20px;}
}

@media(min-width: 992px){	
	.row-revers-lg {flex-wrap: wrap;}	
}

/* <!--------------- Image Zoom effct ---------------!> */

.zoom-img {overflow: hidden}
.zoom-img img, img.zoom-img {transition: .25s ease;}
.zoom-img:hover img, img.zoom-img:hover {transform: scale(1.02);}
.zoom-object {transition: .25s ease}
.zoom-object:hover {transform: scale(1.02);}

/* <!--------------- Hover effct ---------------!> */

.hover-bg-dark-color {transition: all 0.4s;}
.hover-bg-dark-color:hover {background-color: var(--body-bg-dark-gray-color);}

.hover-effct-1 {font-weight: var(--fw-400);}
.hover-effct-1:hover {color: var(--red-color);}
.hover-effct-1 .bi:before {transform-origin: left bottom; transition: 0.15s linear;}
.hover-effct-1:hover .bi:before {transform: scale(1.1)}

@media(max-width: 768px){
	.hover-effct-1 {font-size: 14px}
}

/* <!--------------- Other Style ---------------!> */
.rounded {border-radius: 1.75%!important;}
.sand-glass {max-width: 55%;}

@media(min-width: 768px){
	.width-60 {width: 80%}
}

@media(min-width: 1400px){
	.width-60 {width: 60%}
}

/* <!--------------- Header ---------------!> */

.overlay {position: fixed; top: 0; left: 0; right: 100%	; bottom: 0; background-color: rgb(0, 0, 0, 0.8); z-index: 	992;}
header a, footer a {color: var(--light-text-color)!important;}
header {position: relative;}
header .logo {width: 200px}
.menubar {position: relative;}
.menu-close {position: absolute; top: 0; right:0; opacity: 0; transition: all 0.4s ease}

.menu li {display: inline-block; color: var(--red-color);}
.menu li a {font-weight: var(--fw-600); font-size: 18px; padding: 0 5px}

.menu li a:hover span {color: var(--red-color);}
.menu li:first-child:before {display: none}

.megamenu {width: 100%; background-color: var(--body-bg-light-gray-color); padding: 0!important}
.dropdown-toggle:after {display: none}
.dropdown-toggle.show {color: var(--red-color)!important;}
.dropdown-toggle i {display: inline-block; transition: all 0.4s ease}
.dropdown-toggle.show i {transform: rotate(-180deg);}
.dropdown-menu .service-box {margin-bottom: 0!important}
.dropdown-menu .btn-arrow {clip-path: inset(0 0 0 0)!important;}
header .service-box .two-img-fixed {width: 100px}
header {padding: var(--header-padding-gap);}

@media(min-width: 768px){
	.menu li a {padding: 0 12px}	
}

@media(min-width: 992px){
	.mobile-only {display: none!important}
	header .logo {width: auto}
	.menu li {overflow: hidden;}
	.menu li a {font-size: 20px; padding: 0 20px}
	.menu li a span  {text-shadow: 0 -30px 0; transform: translate3d(0px, 30px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); display: inline-block; transition: all 0.29s;}
	.menu li:hover a span {transform: translate3d(0px, 0, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; text-shadow: 0 -30px 0 rgb(0, 0, 0, 0);}
	.menu .dropdown-toggle.show span {transform: translate3d(0px, 0, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); transform-style: preserve-3d; text-shadow: 0 -30px 0 rgb(0, 0, 0, 0);}
	.megamenu {top: 100%!important; transform: unset!important}
}

@media(min-width: 1200px){
	header {padding: var(--header-padding-gap) 60px}
}

@media(min-width: 1400px){
	header {padding: var(--header-padding-gap) 90px}	
}

@media(max-width: 991px){
	header {z-index: 999;}
	#menu {position: fixed; top: 109px; right: 0; bottom: 0; width: 320px; background-color: var(--body-bg-dark-gray-color); z-index: 999; clip-path: inset(0 0 0 100%); transition: all 0.4s linear; overflow-y: auto}
	header.active {background-color: var(--body-bg-dark-gray-color); border-bottom: 5px solid var(--red-color);}
	header.active .menu-close {opacity: 1}
	header.active .menu-open {opacity: 0}
	header.active #menu {clip-path: inset(0 0 0 0);}
	header li {transition: all 0.25s linear; transform: translateX(120px); transition-delay: 0s; opacity: 0}
	header.active li {transform: translateX(0); opacity: 1;}
	header.active li:nth-child(1) {transition-delay: 0.4s}
	header.active li:nth-child(2) {transition-delay: 0.5s}
	header.active li:nth-child(3) {transition-delay: 0.6s}
	header.active li:nth-child(4) {transition-delay: 0.7s}
	header.active li:nth-child(5) {transition-delay: 0.8s}
	header.active li:nth-child(6) {transition-delay: 0.9s}
	#menu .menu li {display: block; margin: 25px 20px}
	#menu .menu li a {padding-left: 10px}
	.megamenu {margin-top: 25px!important; position: static!important; inset: 0!important; transform: unset!important; border: 2px solid var(--border-dark-color);}	
}

@media(max-width: 767px){
	#menu {top: 77px;}
}

@media(max-width: 330px){
	header .logo {width: auto; padding-right: 20px}
	#menu {top: 79.71px;}
}

/* <!--------------- Banner / Inner Banner ---------------!> */

.banner {height: var(--banner-height); display: flex; align-items: center; padding: calc(var(--section-padding) - var(--header-padding-gap)) 0 var(--section-padding);}
.banner-title-1 {color: var(--light-text-color)!important; margin-bottom: 8px!important;}
.banner-title-2 {font-size: var(--banner-title-2); color: var(--red-color); margin-bottom: 0!important; line-height: 1.1!important;}
.banner-title-2.large {font-size: var(--banner-title-2-large)!important;}
.banner .banner-content {position: relative; z-index: 1;}
.banner .banner-content .banner-fixed-content {position: absolute; top: 0; right: 0; width: 70%; height: 100%; display: flex; align-items: center; justify-content: flex-end; z-index: -1;}
.banner .fixcanvas {max-width: 100%; height: auto!important; margin-left: auto!important}
#animation_container {display: flex; justify-content: flex-end}

@media(min-width: 768px){		
	.banner .fixcanvas {max-width: 85%}
}

@media(min-width: 992px){
	.banner {height: calc(var(--banner-height) - var(--banner-header-height-minus));}
	.banner-title-2.large {margin-left: -6px}
}

@media(min-width: 1400px){
	.banner-title-2.large {margin-left: -7px}
	.banner .fixcanvas {max-width: 100%}	
}

/* <!--------------- Footer ---------------!> */

.bg-footer {background-color: var(--footer-bg-color)}

/* <!--------------- Excited Section ---------------!> */

.excited p {margin-bottom: 0!important; font-size: 14px; font-weight: 500;}
.excited p span {color: var(--red-color); margin: 0 4px;}

@media(min-width: 768px){
	.excited p {font-size: 18px}
	.excited p span {margin: 0 10px}
}

@media(min-width: 992px){
	.excited p {font-size: 22px}
}

/* <!--------------- Services Section ---------------!> */

@media(min-width: 992px){
	.service-box {margin-bottom: -31px}
	.service-box .btn-arrow {clip-path: inset(0 100% 0 0);}
	.service-box:hover .btn-arrow {clip-path: inset(0 0 0 0); transition: all 0.3s linear}
	.service-box:hover .btn-arrow:hover {transition: all 0.15s linear}
}

/* <!--------------- Position Text ---------------!> */

.position-text-1 {position: relative; display: inline-block; }
.position-text-1 h3 {position: absolute; bottom: 1.5%; left: 32%; text-align: left; width: 112%;}

@media(max-width: 576px){
	.position-text-1 h3 {bottom: -10%; left: 32%;}
}

@media(min-width: 576px){
	.position-text-1 h3 br {display: none}
}

/* <!--------------- Form Input style ---------------!> */

form input,form textarea {background-color: transparent; box-shadow: unset!important; border: unset!important; padding: 20px 12px; width: 100%; color: var(--light-text-color); font-size: 22px!important; font-weight: 500;}
form #name {border-right: 2px solid var(--border-dark-color)!important;}
form input {border-top: 2px solid var(--border-dark-color)!important;}
form #message {border-top: 2px solid var(--border-dark-color)!important; border-bottom: 2px solid var(--border-dark-color)!important;}
form input:focus , form textarea:focus {outline: none;}
form input , form textarea {color: var(--white-text-color)!important;}

@media(min-width: 992px){
	form input,form textarea {padding: 50px 50px}
}

@media(min-width: 1400px){
	form input,form textarea {padding: 50px 100px}
	form input,form textarea {padding: 50px 100px}
}

/* <!--------------- Clients Grid ---------------!> */

.clients-grid {display: flex; flex-wrap: wrap; border: 1px solid var(--border-dark-color); border-width: 1px 0;}
.clients-grid-item {width: 50%; padding: 35px 15px; text-align: center; display: none; justify-content: center; align-content: center; transition: ease-in-out .7s; border: 1px solid var(--border-dark-color);}
.clients-grid-item img {-webkit-filter: brightness(100%) contrast(50%) saturate(2%); filter: brightness(100%) contrast(50%) saturate(2%); transition: ease-in-out 0.7s; pointer-events: none; user-select: none;}
.clients-grid-item img.contrast {-webkit-filter: brightness(100%) contrast(20%) saturate(2%); filter: brightness(100%) contrast(20%) saturate(2%);}
.clients-grid-item:hover img {-webkit-filter: none; filter: none;}
.clients-grid-item:hover {background-color: var(--body-bg-white-color);}
.clients-grid-item {position: relative; z-index: 1}
.clients-grid-item .sm-shadow {position: absolute; top: 0; left: 0; width: calc(100% + 2px); height: 100%; background-color: #fff; z-index: -1; transition: all 0.25s linear; display: none; opacity: 0;}

@media(min-width: 576px){
	.clients-grid-item {width: 33.33%;}
	.dub-gap {width: 33.33%;}
}

@media(min-width: 768px){
	.clients-grid-item {width: 20%; display: flex;}
	.dub-gap {width: 40%;}
	.clientLoadMore {display: none!important;}
}

@media(min-width: 992px){
	.clients-grid-item {width: 20%;}
	.dub-gap {width: 40%;}
}

@media(min-width: 1200px){
	.clients-grid-item {width: 12.5%;}
	.dub-gap {width: 25%;}
	.dub-gap img {max-width: 85%}
	/* .clients-grid-item:hover {background-color: transparent;} */
	.clients-grid-item .sm-shadow {display: block;}
}

/* <!-------------------- Swiper --------------------!> */

.swiper-button-prev:after, .swiper-button-next:after {display: none;}
.swiper-button-prev, .swiper-button-next {margin: 0; width: unset; height: unset;}
.swiper-button-prev .bi, .swiper-button-next .bi {font-size: 32px; color: var(--white-text-color);}
.swiper-button-next {margin-left: 8px}
.website-swiper .static-nav {margin-top: 20px}
.static-nav .swiper-button-prev, .static-nav .swiper-button-next {position: static!important; display: inline-block;}
.static-nav .swiper-pagination {position: static; text-align: left}

.swiper-pagination-bullet {width: 12px; height: 12px; transition: all 0.2s ease; background-color: var(--white-text-color);}
.swiper-pagination-bullet-active {border-radius: unset!important;}
.swiper-colorfull .swiper-button-prev .bi:before, .swiper-colorfull .swiper-button-next .bi:before {color: var(--work-tone);}
.swiper-colorfull .swiper-pagination-bullet {background-color: var(--work-tone);}

.swiper-slide-active.border-left-md {border-left: 0!important;}
.swiper-slide-active.border-left-lg {border-left: 0!important;}
.swiper-3 .swiper-slide, .swiper-2 .swiper-slide {height: auto}

@media(min-width: 992px){
	.slider-scale-gap {margin-left: calc(16.8% - 12px); margin-right: calc(16.8% - 12px);}
	.swiper-button-next {margin-left: 10px}
}
@media(min-width: 1200px){
	.slider-scale-gap {margin-left: calc(22.8% - 12px); margin-right: calc(22.8% - 12px);}
}

@media(min-width: 1300px){
	.slider-scale-gap {margin-left: calc(25% - 12px); margin-right: calc(25% - 12px);}
}

@media(min-width: 1400px){
	.slider-scale-gap {margin-left: calc(20% - 12px); margin-right: calc(20% - 12px);}
}
@media(min-width: 1600px){
	.slider-scale-gap {margin-left: calc(23.4% - 12px); margin-right: calc(23.4% - 12px);}
}

.nav-pills {margin: -10px}
.nav-pills li {margin: 10px}
.mobile-sitcky-top {position: sticky; top: 0; z-index: 999; transition: all 0.3s ease}
.mobile-sitcky-top.active {background-color: var(--body-bg-light-gray-color); padding: 20px 0; box-shadow: 0 0.375rem 0.9375rem 0 rgb(26 22 40 / 20%)!important; border-bottom: 2px solid var(--border-dark-color);}

@media(max-width: 992px){
	.nav-pills {margin: -10px -5px}
	.nav-pills li {margin: 10px 5px}
}

@media(max-width: 767px){
	.pills-dropdown {position: relative;}
	.pills-dropdown .nav-pills {display: block; margin: 0; position: absolute; top: 100%; left: 0; right: 0; width: 100%; background-color: var(--body-bg-light-gray-color); clip-path: inset(0 0 100% 0); transition: all 0.4s linear; z-index: 992; }
	.pills-dropdown.active .nav-pills {clip-path: inset(0 0 0 0);}
	.pills-dropdown li {margin: 0}
	.pills-dropdown .btn-red {width: 100%; text-align: left; display: flex!important; justify-content: space-between; align-items: center;}
	.pills-dropdown .nav-pills .btn-red {border-top: 0}
	.pills-dropdown .pills-dropdown-open:hover, .pills-dropdown .pills-dropdown-open:focus {color: var(--red-color)!important; background-color: transparent!important;}	
	.pills-dropdown .bi-chevron-down {line-height: 1}
	.pills-dropdown  .bi-chevron-down {display: inline-block; transition: all 0.4s ease}
	.pills-dropdown.active .bi-chevron-down {transform: rotate(-180deg);}

	.mobile-sitcky-top.active {padding: 10px 0}
	.mobile-sitcky-top.active .btn-red {padding: 10px 20px!important}

}
@media(min-width: 768px){
	.pills-dropdown-open {display: none!important;}
}

@keyframes spin {
	0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg);}
	100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}

.arrow-up-right {position: absolute; bottom: -3px; right: -3px; overflow: hidden; padding: 10px}
.arrow-up-right a {font-weight: var(--fw-500); background-color: var(--work-tone); padding-left: 10px; border-radius: 4px; box-shadow: 0 0 10px rgb(0 0 0 / 18%); border-radius: 4px; transition: background-color 0.25s ease;}
.arrow-up-right a {color: var(--white-text-color); display: flex; align-items: center;}
.arrow-up-right i.bi:before {padding: 5px 10px 5px 5px; font-weight: var(--fw-700);}

@media(min-width: 992px){
	.arrow-up-right {bottom: 10px; right: 10px; padding: 12px}
	.arrow-up-right a {background-color: transparent; box-shadow: unset; border-radius: 8px;}
	.arrow-up-right span {display: inline-block; opacity: 0; transform: translateX(-100px); transition: all 0.25s ease}
	.arrow-up-right i.bi:before {background-color: var(--work-tone); padding: 10px; box-shadow: 0 0 10px rgb(0 0 0 / 18%); border-radius: 8px; transition: transform 0.2s linear;}

	.arrow-up-right a:hover {background-color: var(--work-tone); box-shadow: 0 0 10px rgb(0 0 0 / 18%);}
	.arrow-up-right a:hover span {opacity: 1; transform: translateX(0);}
	.arrow-up-right a:hover i.bi:before {box-shadow: unset!important; transform: scale(0.92);}
}