/*
* BeConnected.css
* www.beconnected.tech
******************************************************************************/

body {font-family:'Cairo' !important;}
a:hover {-webkit-animation-name: pulse;animation-name: pulse;-webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-duration: var(--animate-duration);animation-duration: var(--animate-duration);-webkit-animation-fill-mode: both;animation-fill-mode: both;}
a:hover p {color: #6f6b7d;}

.select2-container--default, .select2-container--default * {z-index: 9;}

.sticky-top {position: sticky;bottom: 0;top: 110px;z-index: 0;}

.box-1x1 {aspect-ratio: 1 / 1 !important;}
.box-1x2 {aspect-ratio: 1 / 2 !important;}
.box-1x3 {aspect-ratio: 1 / 3 !important;}
.box-1x4 {aspect-ratio: 1 / 4 !important;}
.box-2x1 {aspect-ratio: 2 / 1 !important;}
.box-2x3 {aspect-ratio: 2 / 3 !important;}
.box-2x5 {aspect-ratio: 2 / 5 !important;}
.box-3x1 {aspect-ratio: 3 / 1 !important;}
.box-3x2 {aspect-ratio: 3 / 2 !important;}
.box-16x9 {aspect-ratio: 16 / 9 !important;}
.box-9x16 {aspect-ratio: 9 / 19 !important;}
.box-4x3 {aspect-ratio: 4 / 3 !important;}

.box-arrow {width: 30%; aspect-ratio: 1 / 1; border-top: 3px solid; border-right: 3px solid; position: absolute; top: -1rem; right: -1rem; opacity: 1;animation-name: mymove !important;}
@keyframes mymove {0% {opacity: 1;} 30% {opacity: 0.6;} 60% {opacity: 0;} 100% {opacity: 0;}}
@keyframes mymove2 {0% {opacity: 0.6;} 30% {opacity: 0.3;} 60% {opacity: 0;} 100% {opacity: 1;}}
@keyframes mymove3 {0% {opacity: 0.3;} 30% {opacity: 0;} 60% {opacity: 1;} 100% {opacity: 0.6;}}
.box-arrow.box-2 {border-top: 2px dashed;border-right: 2px dashed;top: 0rem; right: 0rem;opacity: 0.6;animation-name: mymove2 !important;}
.box-arrow.box-3 {border-top: 2px dashed;border-right: 2px dashed;top: 1rem; right: 1rem;opacity: 0.3;animation-name: mymove3 !important;}
.posts-box a:hover .box-arrow {animation: 1s infinite;}
.posts-box a:hover .mie-icon-s {animation:move-icon 0.5s forwards;}
.mie-icon-s {position: absolute;z-index: 0;margin-top: -5px;margin-right: -5px;width:25%;height: auto;top: 0;right: 0;opacity: 1;z-index: 0;animation:back-icon 0.5s forwards;}
@keyframes move-icon {from {top:0px;right:0px;opacity: 0.5;} to {top:-20px;right:-20px;opacity:1;} }
@keyframes back-icon {from {top:-20px;right:-20px;opacity: 0.5;} to {top:-0px;right:-0px;opacity: 1;} }


.l2r {direction:ltr !important;}

.offcanvas {max-height: 100vh;overflow: auto;}
#offcanvasEndLabel:has(+ #forgot-password.active) {display:none;}

.section-title::after {bottom: -5px;}

.nav-pills .nav-link {background: #f5f5f5}

#description .desc-div img {max-width:100%;}

.iti {width:100%;}
.form-floating .iti--allow-dropdown input {height:60px !important;width: -webkit-fill-available !important;}
.form-floating .iti--allow-dropdown .iti__search-input {height: auto;padding: 8px 20px;border: 1px solid #ccc;}
.form-floating .iti--allow-dropdown .form-control:focus + label, .iti--allow-dropdown + label {display:none;}
.form-floating .iti--allow-dropdown + label {width:100%;text-align:end;padding-right: 25px;;}

/**********----------+++++---------- ANIMATION ----------+++++----------**********/

.shine {background:linear-gradient(to right, #505050 0, white 10%, #505050 20%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;animation: shine-animate 3s linear infinite;}
.shine-white {background: linear-gradient(to right, #ffffff 0, #b03e3e 10%, #ffffff 20%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;animation: shine-animate 3s linear infinite;}
.shine-2 {animation: shine-animate-2 3s linear infinite !important;}
.shine-3 {animation: shine-animate-3 3s linear infinite !important;}
.shine-4 {animation: shine-animate-4 3s linear infinite !important;}
.shine-6 {animation: shine-animate-6 3s linear infinite !important;}
.shine-8 {animation: shine-animate-8 3s linear infinite !important;}
@keyframes shine-animate {0% {background-position: 0;} 50% {background-position: 80vw;} 100% {background-position: 80vw;}}
@keyframes shine-animate-2 {0% {background-position: 0;} 50% {background-position: 12vw;} 100% {background-position: 12vw;}}
@keyframes shine-animate-3 {0% {background-position: 0;} 50% {background-position: 15vw;} 100% {background-position: 15vw;}}
@keyframes shine-animate-4 {0% {background-position: 0;} 50% {background-position: 25vw;} 100% {background-position: 25vw;}}
@keyframes shine-animate-6 {0% {background-position: 0;} 50% {background-position: 35vw;} 100% {background-position: 35vw;}}
@keyframes shine-animate-8 {0% {background-position: 0;} 50% {background-position: 50vw;} 100% {background-position: 50vw;}}
.ani-infinite {animation-iteration-count: infinite;}
.ani-2s {animation-duration: 2s;}
.ani-ring {animation:ring 4s ease-in-out .7s infinite;}
@keyframes ring {0% {transform: rotate(0)} 1% {transform: rotate(15deg)} 3% {transform: rotate(-14deg)} 5% {transform: rotate(17deg)} 7% {transform: rotate(-16deg)} 9% {transform: rotate(15deg)} 11% {transform: rotate(-14deg)} 13% {transform: rotate(13deg)} 15% {transform: rotate(-12deg)} 17% {transform: rotate(12deg)} 19% {transform: rotate(-10deg)} 21% {transform: rotate(9deg)} 23% {transform: rotate(-8deg)} 25% {transform: rotate(7deg)} 27% {transform: rotate(-5deg)} 29% {transform: rotate(5deg)} 31% {transform: rotate(-4deg)} 33% {transform: rotate(3deg)} 35% {transform: rotate(-2deg)} 37% {transform: rotate(1deg)} 39% {transform: rotate(-1deg)} 41% {transform: rotate(1deg)} 43% {transform: rotate(0)} to {transform: rotate(0)}}

/**********----------+++++---------- ONLINE-BECHAT ----------+++++----------**********/

#online-bechat {width:100%;z-index: 1050;}
#online-bechat .close {position:absolute;top:0rem;right:0rem;z-index:1;}
#online-bechat .bechat-btn {position:fixed;bottom:1rem;right:1rem;z-index: 1051;}
#online-bechat .bechat-div {position:fixed;bottom:2rem;right:2rem;z-index: 1050;}
#online-bechat .app-chat, #online-bechat .app-chat .app-chat-history {position: relative;}
#online-bechat .app-chat .app-chat-history .chat-history-body {overflow: auto !important;}

/**********----------+++++---------- SWIPER ----------+++++----------**********/

.swiper {height:auto;}
.swiper .swiper-slide {padding:0;background:transparent;}
.product-media .swiper-slide {aspect-ratio: 1 / 1;overflow: hidden;}
.product-media .swiper-slide :where(img, video) {object-fit: cover;width: 100%;height: 100%;}
#swiper-multiple-slides.related-products {height:auto;}
#swiper-multiple-slides.related-products .swiper-slide {border-radius: 10px;}
#partners .swiper .swiper-slide {background: transparent;aspect-ratio: 3 / 1;display: flex
;align-items: center;justify-content: center;}
#partners .swiper .swiper-slide a {padding:10px 30px;}
#partners .swiper .swiper-slide img {max-width: 80%;max-height: 100%;}

/**********----------+++++---------- NAV-LAYOUT ----------+++++----------**********/

.light-style .layout-navbar .navbar.landing-navbar {border-color: rgb(24 24 24 / 68%);background: rgb(0 0 0 / 38%);}
.light-style .layout-navbar .navbar.landing-navbar .navbar-nav .mega-dropdown .nav-item .nav-link.mega-dropdown-link {color: #5d596c;}
.light-style .layout-navbar.navbar-active .navbar.landing-navbar .navbar-nav .nav-link, .light-style .layout-navbar.navbar-white .navbar.landing-navbar .navbar-nav .nav-link {color: #5d596c;}
.light-style .layout-navbar.navbar-active .navbar-toggler {color: #5d596c;}
.light-style .layout-navbar.navbar-active .navbar.landing-navbar {border-color: rgba(255, 255, 255, 0.68);background: #ffffff !important;box-shadow: 0 0 0.25rem rgba(165, 163, 174, 0.3);border-radius: 0;}
.navbar-white {border-color: rgba(255, 255, 255, 0.68);background: #ffffff !important;box-shadow: 0 0 0.25rem rgba(165, 163, 174, 0.3);border-radius: 0;}
.app-brand {margin-top: -10px;}
.app-brand-link img {max-height: 55px;}
.light-style .layout-navbar.navbar-active .app-brand-link.light-logo {display:block !important;}
.light-style .layout-navbar.navbar-active .app-brand-link.dark-logo, .light-style .layout-navbar.navbar-active .services-menu, .light-style .layout-navbar.navbar-active .suppliers-menu {display:none;}
.light-style .layout-navbar.navbar-white .app-brand-link.light-logo {display:block !important;}
.light-style .layout-navbar.navbar-white .app-brand-link.dark-logo  {display:none;}
.nav-link:focus-visible {box-shadow: unset;}
.dropdown-menu[data-bs-popper] {left:auto;}
.navbar-toggler {margin-top: 10px;color: #e2e2e2;}


/**********----------+++++---------- VIDEO-HOME ----------+++++----------**********/

.home-video {height: 100%;width: 100%;background-position: 50% 50%;overflow: hidden;position: relative;}
.home-video video, .home-video img {position: absolute;object-fit: cover;width: 100%;height: 100%;}
.home-video .home-video-content {position:relative;margin:auto;display: flex;flex-direction: column;justify-content: center;align-items: center;height:100%;}
.home-video .home-video-content h1 {z-index:1;}
.search-home-video {z-index: 1;position: relative;box-shadow: 0 0 20px #333;border-radius: 8px;}
.navbar-active + #home .search-home-video {display:none;}
.header-bg {-webkit-mask-image: -webkit-gradient(linear, left -50%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));background: #000000dd;position: absolute;top: 0;width: 100%;bottom: 0;left: 0;right: 0;height: 100%;}
#slider-services .card {background: #1313139e;}

#home .home-video, #suppliers-home .home-video {height: 100%;width: 100%;background-position: 50% 50%;overflow: hidden;position: relative;}
.supplier-page .home-video {height:350px;}

/**********----------+++++---------- PRODUCT ----------+++++----------**********/

.prod-view:hover .prod-item {box-shadow: 0px 20px 40px rgb(0 0 0 / 20%) !important;border:none;}
.prod-view::before, .prod-view::after {box-sizing: inherit;content: '';position: absolute;width:10%;height:10%;border-radius: 12px;transition: color 0.3s;border: 2px solid transparent;z-index:0;}
.prod-view::before {top: 0;left: 0;}
.prod-view::after {top: 0;bottom: 0;left: 0;right: 0;}
.prod-view:hover::before, .prod-view:hover::after {width:calc(100% + 0px);height:calc(100% + 0px);}
.prod-view:hover::before {border-top-color:#fb4b60;border-right-color:#fb4b60;transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;}
.prod-view:hover::after {border-bottom-color:#fb4b60;border-left-color:#fb4b60;transition:height 0.3s ease-out,width 0.3s ease-out 0.3s;}
.prod-view .prod-item {z-index: 1;position: relative;;border-radius: 10px;border: 1px solid #dbdade;}
.prod-img .hov-video, .prod-img .hov-video img {object-fit: cover;width: 100%;height: 100%;}

/**********----------+++++---------- CONTENT ----------+++++----------**********/

.section-py {padding: 5.25rem 0;}
#services-section {background: #00010f;}
#services-section .card {background: #101120ad;}
#services-section i {font-size: 4rem !important;}
#categories-section {background: #ffffff;}
#categories-section .category-icon a {aspect-ratio: 1 / 1;}
#categories-section .category-icon i {font-size: 3rem;}
#categories-section .list-group  {overflow: auto;aspect-ratio: 3 / 4;}
.products-section {background: #f3f5f7;}
.products-section .prod-view {border-radius: 10px;position: relative;padding: 2px;}
.products-section .prod-view video, #products-section .prod-view img {border-radius: 10px 10px 0 0;}
.products-section .prod-img {overflow: hidden;aspect-ratio: 1 / 1;}
.products-section .prod-info small {height: 40px;display: block;overflow: hidden;}
.products-section .prod-info h6 {height: 22px;overflow: hidden;}
#direct-requests .card {background: #00000021;}
#how-it-works .lottie-div {aspect-ratio: 5 / 3;}
.certifications img {width:64px;height:64px;}
.product-detail .certifications img {width:50px;height:50px;}

.brand-info {position: absolute;background: #dd0000bb;bottom: 0;left: 0;right: 0;z-index: 9999999999;height: 0;overflow: hidden;transition: height 0.5s;margin:auto;border-radius: 10px;color: #fff !important;flex-direction: column;justify-content: center;}
.brand-div:hover .brand-info {height: 100% !important;}
.brand-div {padding-top: 100%;height: 0;box-shadow: 0 1px 11px 0 rgba(0, 0, 0, 0.12);position: relative;border-radius: 8px;}
.brand-logo {height:100%;width:100%;justify-content: center;display: flex;align-items: center;position: absolute;top: 0;}
.brand-logo img {border-radius: 8px;height:auto;width: 100%;}
.profile-img-div {margin-top:-7rem;}

.landing-contact .contact-img-box::before {inset-block-start: -2.2rem;inset-inline-start: -2.5rem;}
.posts-box {border-radius: 3.5rem 0 0.5rem 0.5rem;}
.posts-box .post-img {border-radius: 3.5rem 0rem 0rem 0rem;}
.posts-box .post-img-div {aspect-ratio: 3 / 2;overflow: hidden;}
.posts-box .post-img-div .post-img {object-fit: cover;width: 100%;height: 100%;}
.posts-box .post-title {height:1.5rem;}
.posts-box .post-title + p {height:4rem;}

.description p img {max-width: 100%;height: auto;}

/**********----------+++++---------- SIDEBAR ----------+++++----------**********/

#sidebar .filter img {height: 20px;width: 20px;border-radius: 3px;}
#sidebar .filter .filter-sub-content {max-height: 150px;overflow: auto;}
#sidebar .navbar {z-index: unset;}
#sidebar .nav-link {color: #6f6c7d;}
#sidebar .nav-link:hover {font-weight: bold;}
#sidebar .navbar-brand {white-space: pre-wrap;}

/**********----------+++++---------- FOOTER ----------+++++----------**********/

.light-style .landing-footer .footer-top {background: #31344b;background-image:none;}

/**********----------+++++---------- CUSTOM ----------+++++----------**********/

.btn-website {color: #fff;background-color: #e9a630;border-color: #c68920;}
.ti-brand-website:before {content: "\f38f";}
.btn-website:hover {color: #fff !important;background-color: #fbc058 !important;border-color: #c68920 !important;}

/*.breadcrumb-item, .breadcrumb-item a {color: #6f6b7d;}
.breadcrumb-item + .breadcrumb-item::before {content: "\ea61";font-family: "tabler-icons" !important;}
[dir=rtl] .breadcrumb-item + .breadcrumb-item::before {content: "\ea60";font-family: "tabler-icons" !important;}
aside.menu {z-index: 9;position: relative;}
.menu-inner {padding:0 !important;}
#sub-header-img {height: 300px;display: flex;justify-content: center;align-items: center;overflow: hidden;position: relative;}
#sub-header-img .mask {background: #fff9;height: inherit;width: 100%;position: absolute;box-shadow: 0 0 100px #ccc inset;}
#sub-header-img img {width: 100%;aspect-ratio: 3 / 1;object-fit: cover;}
#sub-header-img h2 {position: absolute;margin: auto;font-weight: bold;}

.rtl-only {display: none !important;text-align: left !important;direction: ltr !important;}

[dir='rtl'] .rtl-only {display: block !important;}

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
  #dropdown-variation-demo .btn-group .text-truncate {width: 254px;position: relative;}
  #dropdown-variation-demo .btn-group .text-truncate::after {position: absolute;top: 45%;right: 0.65rem;}
}


/**********----------+++++---------- IMOJI PICKER ----------+++++----------*********/

body {
  font-family: sans-serif;
}

#selection {
  display: flex;
  align-items: center;
  flex-direction: row;
}

#selection-outer {
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #eee;
  padding: 0.5rem;
  width: 360px;
  margin-top: 2rem;
  transition: opacity 200ms;
}

#selection-outer.empty {opacity: 0;}

.popupContainer h2 {margin: 0;/* margin-bottom: 1rem; */font-size: 1rem;text-align: center;}

#selection-emoji {font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI','Apple Color Emoji', 'Twemoji Mozilla', 'Noto Color Emoji', 'EmojiOne Color','Android Emoji';font-size: 3rem;margin-right: 1rem;border-radius: 5px;display: flex;align-items: center;justify-content: center;width: 4rem;height: 4rem;border: 1px solid #999;background: #fff;}

.popupContainer > button.closeButton {z-index: 5000;}
.popupContainer {position: fixed;bottom: 2rem;right: 2rem;z-index: 11111;}

/**********----------+++++---------- RTL ----------+++++----------**********/

[dir=rtl]:root {font-size:15px !important;}
[dir=rtl] .l2r {direction:ltr !important;}
[dir=rtl] h1, [dir=rtl] .h1 {font-size: 2rem;}
[dir=rtl] h2, [dir=rtl] .h2 {font-size: 1.75rem;}
[dir=rtl] h4, [dir=rtl] .h4 {font-size: 1.15rem;}

/**********----------+++++---------- MEDIA ----------+++++----------**********/

@media (min-width: 992px) {
	.navbar.landing-navbar .navbar-nav .nav-item.mega-dropdown > .dropdown-menu [class*="col"] {max-height: 60vh;overflow:auto;display: flex;flex-flow: column;}
	.light-style .layout-navbar .navbar.landing-navbar .navbar-nav .nav-link {color: #ffffff;}
    .container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {padding-right: 3.5rem !important;padding-left:3.5rem !important;}
	.layout-navbar .navbar.landing-navbar {border-color: transparent !important;background: transparent !important;margin-top:0;padding: 25px 50px !important;border: none;}
	.layout-navbar .container {padding-right: 0rem !important;padding-left: 0rem !important;}
	.col-lg-1-5 {width:12.5%;}
	.navbar.landing-navbar .navbar-nav .nav-item.mega-dropdown > .dropdown-menu {box-shadow:0 1rem 1rem rgba(165, 163, 174, 0.45);border-radius: unset;max-width: 100%;}
}

@media (min-width: 768px) {
	.light-style .layout-navbar.navbar-active .search-menu {display:block !important;}
}

@media (max-width: 768px) {
	.navbar.landing-navbar {padding: 0.76rem !important;}
	.light-style .layout-navbar.navbar-active .navbar.landing-navbar {border-radius: 0.5rem;}
	.dropdown-menu.btn-menu .card {border: none;margin-bottom: 0.5rem;}
	.dropdown-menu.btn-menu .card-icon i {font-size: 20px;}
	.dropdown-menu.btn-menu .card-title h5 {font-size: 14px;font-weight: normal;}
	.app-brand-link img {max-height: 40px;}
	.search-home-video {width:90% !important;}
	#online-bechat .bechat-btn {z-index: 1049;}
	#carouselHome .carousel-item {height:calc(100vw * 0.6667);}
	#carouselHome .carousel-item img {width: 100%;aspect-ratio: 3 / 2;object-fit: cover;}
	#categories-section .category-icon i {font-size: 2rem;}
	#online-bechat .bechat-div {bottom: 0;right: 0;left: 0;height: 100%;}
	#online-bechat #bechat-register {height:100vh;}
	#online-bechat .bechat-btn {bottom: 1rem;right: 1rem;}
	#online-bechat .app-chat .app-chat-history .chat-history-body {max-height:calc(100vh - 10rem);height: auto;}
	#online-bechat .app-chat .app-chat-history .chat-history-footer {position: fixed;width: calc(100% - 3rem);bottom: 0px;}
	[class*="shine"] {animation:shine-animate 3s linear infinite !important;}
}