@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
html{ direction: rtl; width: 100%; overflow-x: hidden;  scroll-behavior: smooth;}
body{width: 100%; overflow-x: hidden; font-family: "Cairo", sans-serif !important;}
a{text-decoration: none;}
.appjad-image{position: relative;width: 100%;padding-bottom: 100%;overflow: hidden;}
.appjad-image.re{padding-bottom: 60%; }

.appjad-image.cover{padding-bottom: 33%; }
.appjad-image.to{padding-bottom: 180%; }
.appjad-image.circle{  border-radius: 100% ; background-color: #FFF; border: solid; border-color: #FFF;  border-width: 4%; }

.appjad-image.ro{ transform: translateY(-1px) rotate(0deg); }
.appjad-image img{position: absolute; left: 50%;top: 50%; min-height: 100%; width: 100%;
  -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%);transition: all .5s;
  transform: translate(-50%,-50%);object-fit: cover;object-position: center;}
.appjad-effect {    display: block;  position: relative;   overflow: hidden; } 
.appjad-effect::before{  background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;   bottom: 0; right: 0;   opacity: 1; position: absolute; width: 0; height: 0; content: "";}
.appjad-effect::after {  background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;   left: 0;  top: 0;  opacity: 1;  position: absolute;  width: 0;  height: 0;   content: "";}
.appjad-effect:hover::before, .appjad-effect:hover::after{    height: 100%;    width: 100%;    opacity: 0;   z-index: 9;  transition-duration: 1.3s;  }
.image-item:hover .appjad-effect::before, .image-item:hover  .appjad-effect::after{    height: 100%;    width: 100%;    opacity: 0;   z-index: 9;  transition-duration: 1.3s;  }

.profile {position: relative !important;}
.profile .cover{position: relative !important;}
.profile .profile-image{position: relative !important;}
.profile .profile-image{
  width: 200px !important;
  height: 200px;
  margin-top: -50px;
  margin-right: 50px;
}
.profile .profile-info{
  margin-top: -140px;
  width: calc(100% - 300px);
  float: left;
}
#editor-ar, #editor-en {
  width: 100%;
}
.qrcode{width: 100px !important;}
.btn-primary{border: 0 !important;}
.bg-primary{border: 0 !important;}
.color-azrak{color: #009245 !important;}
a.color-azrak:hover{color: #39B54A !important;}
.color-azrak-2{color: #39B54A !important;}
a.color-azrak:hover{color: #009245 !important;}
.list-group-item.active {background-color: #009245 !important;     border-color: #009245 !important; }

.categories-list .list-item:nth-child(odd) .bg-azrak{background-color: #39B54A !important;}
.categories-list .list-item:nth-child(even) .bg-azrak{background-color: #009245 !important;}

.bg-azrak{background-color: #009245 !important;}
.bg-azrak:hover {  color: #fff;  background-color: #39B54A !important;  border-color: #e6e6e6}
.bg-azrak:focus,.bg-azrak.focus {  box-shadow: 0 0 0 .2rem rgba(255,255,255,.5)}
.bg-azrak.disabled,.bg-azrak:disabled {  color: #fff;  background-color: #092d40 !important;   border-color: #fff}
.bg-azrak:not(:disabled):not(.disabled):active,.bg-azrak:not(:disabled):not(.disabled).active,.show>.bg-azrak.dropdown-toggle {  color: #fff;  background-color: #39B54A !important;  border-color: #dfdfdf}
.bg-azrak:not(:disabled):not(.disabled):active:focus,.bg-azrak:not(:disabled):not(.disabled).active:focus,.show>.bg-azrak.dropdown-toggle:focus {box-shadow: 0 0 0 .2rem rgba(255,255,255,.5)}

.bg-azrak-2{background-color: #39B54A !important;}
.bg-azrak-2:hover {  color: #fff;  background-color: #009245 !important;  border-color: #e6e6e6}
.bg-azrak-2:focus,.bg-azrak.focus {  box-shadow: 0 0 0 .2rem rgba(255,255,255,.5)}
.bg-azrak-2.disabled,.bg-azrak:disabled {  color: #fff;  background-color: #092d40 !important;   border-color: #fff}
.bg-azrak-2:not(:disabled):not(.disabled):active,.bg-azrak-2:not(:disabled):not(.disabled).active,.show>.bg-azrak-2.dropdown-toggle {  color: #fff;  background-color: #009245 !important;  border-color: #dfdfdf}
.bg-azrak-2:not(:disabled):not(.disabled):active:focus,.bg-azrak-2:not(:disabled):not(.disabled).active:focus,.show>.bg-azrak-2.dropdown-toggle:focus {box-shadow: 0 0 0 .2rem rgba(255,255,255,.5)}


.text-justify{text-align: justify; line-height: 25pt;}
header.header{  background:  url(../images/team-shape1.png) left center no-repeat,
   url(../images/blog-shape1.png) right center no-repeat;
background-color: #FFF !important;
position: relative;}

li::marker{font-size:0;}

#lavalamp .nav-link{font-size: 1.2rem;}
#lavalamp .nav-link:hover{background: #0B2051; color: #FFF; }

.auth{min-height: 70vh;}

#myCarousel  .carousel-caption{bottom: 25% !important;}
#myCarousel .carousel-bg{height: calc(100vh - 50px) !important;}
#myCarousel .color-bg{background-color: rgba(0, 0, 0, 0.4);  width: 100%; height: 100%; position: absolute;}
.fixed-bg { position: relative; overflow: hidden; height: 50vh;  background-repeat: no-repeat !important;  background-size: cover !important;  background-position: center !important;  background-attachment: fixed !important;}
.fixed-bg .color-bg{background-color: rgba(0, 0, 0, 0.4); width: 100%; height: 100%; position: absolute;}
.fixed-bg .container{z-index: 2;}
.fixed-bg  .bg-caption{ position: absolute; background-color: #0B2051; width: 70%;  height: 70%; right: 13%;   top: 40%; z-index: 1;
  -webkit-animation:swing 45s linear infinite;
  -moz-animation:swing 45s linear infinite;
  animation:tada2 20s linear infinite;}
.fixed-bg .caption{ padding-top: 20%; z-index: 3 !important; position: relative;}  
.bg-white-50{background-color: rgba(255, 255, 255, 0.9) !important;}
#myCarousel .carousel-control-prev{  top: 50%;	right: -50px !important; left: auto !important;}
#myCarousel .carousel-control-next{  top: 50%;	left: -50px !important; right: auto !important;}
#myCarousel:hover .carousel-control-prev{	right: 50px !important;}
#myCarousel:hover .carousel-control-next{	left: 50px !important;}
#myCarousel .carousel-control-prev,
#myCarousel .carousel-control-next{	font-size: 0px;	color: #0B2051;
background-color: #0B2051;	width: 50px;	height: 50px;  padding-top: 10px;
transition: all 400ms ease-in-out;	-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;	-o-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;	display: inline-block;	text-align: center;	z-index: 1;}
#myCarousel  .carousel-caption {     bottom: auto;     }
#myCarousel  .carousel-caption  .bg-caption{ position: absolute; background-color: #0B2051; width: 70%;  height: 70%; left: 10%;   
  -webkit-animation:swing 45s linear infinite;
  -moz-animation:swing 45s linear infinite;
  animation:tada2 20s linear infinite;}
#myCarousel  .carousel-caption .fb-slider-title {   font-family: "Cairo", sans-serif;  color: #FFF;   margin: 0 0 30px;  }
#myCarousel  .carousel-caption .fb-slider-title,
#myCarousel  .carousel-caption .fb-slider-desc{color: #FFF;	-webkit-animation-duration: 1s;	animation-duration: 1s;	-webkit-animation-fill-mode: both;	
animation-fill-mode: both;
animation-name: zoomIn;	animation-delay: 0.3s;}
#myCarousel  .carousel-caption .fb-slider-title {	animation-name: zoomIn; }
#myCarousel  .carousel-caption .fb-slider-subtitle {	animation-name: fadeInLeft;}
#myCarousel  .carousel-caption .fb-slider-desc,#myCarousel  .carousel-caption .fb-slider-slider-button{	animation-name: fadeInUp;}
#myCarousel  .carousel-caption .fb-slider-title span{	color: #0B2051;}
#myCarousel  .carousel-caption .fb-slider-desc {font-family: "Cairo", sans-serif;	color: #FFF;	margin: 0 0 30px 0;}

#myCarousel:hover + .featured{	margin-top: 80px !important;}

.img-rotate-1 {  position: absolute; top: 50%;bottom:  50%;  left: 10%; right: 0;  width: 100%;  margin:auto;  -webkit-animation:spin 45s linear infinite;  -moz-animation:spin 45s linear infinite;  animation:spin 45s linear infinite;}
.img-rotate-2 {	position: absolute;  top: 50%;bottom:  50%;  left: 0%; right: 0;  width: 120%;   margin:auto; -webkit-animation: spin2 45s linear infinite;    -moz-animation: spin2 45s linear infinite;    animation: spin2 45s linear infinite;}
.img-rotate-3 {	position: fixed;    width: 30%;    left: 20%;    top: 20%;    margin: auto !important;    -webkit-animation: tada 45s linear infinite;    -moz-animation: tada 45s linear infinite;    animation: tada 45s linear infinite;     z-index: -1;    opacity: 0.1;}

.companies .item .line-container {  position: relative;  height: 100%;  width: 20px;  overflow: hidden;}
.companies  .item .line-container::before {
  content: '';  position: absolute;  top: 0;  left: 0;  height: 0;  width: 100%;  background-color: #0B2051;  transition: height 0.3s ease;}
  
.companies  .item:hover .line-container::before {  height: 100%;}


.page.services{min-height: 650px;}
.services{background: transparent url(../images/bg3.jpg) center center/cover no-repeat scroll !important; position: relative;}
.services .shake-image{position: absolute; z-index: 1;}
.services .shake-image.img-1{top: 40%; left: 5%;  -webkit-animation:  hinge 25s linear infinite;
  -moz-animation: hinge 25s linear infinite;
  animation: hinge 15s linear infinite;}
.services .shake-image.img-2{top: 25%; right: 5%;  -webkit-animation:  shake 25s linear infinite;
-moz-animation: shake 25s linear infinite;
animation: shake 25s linear infinite; z-index: 1;}
.services .shake-image.img-3{bottom: 20%; right: 5%;  -webkit-animation:  fadeIn 3s linear infinite;
  -moz-animation: fadeIn 3s linear infinite;
  animation: fadeIn 3s linear infinite;}
.services .col-md-4{z-index: 9;}
.services .item{transition: all 400ms ease-in-out !important;	-webkit-transition: all 400ms ease-in-out!important;	
  -moz-transition: all 400ms ease-in-out!important;		-o-transition: all 400ms ease-in-out!important;	
  -ms-transition: all 400ms ease-in-out!important;	}
.services .item .line-container {  position: relative;  width: 100%;  height: 20px;  overflow: hidden;}
.services  .item .line-container::before {
  content: '';  position: absolute;  top: 0;  left: 0;  width: 0;  height: 100%;  background-color: #0B2051;  transition: width 0.3s ease;}
.services  .item:hover .line-container::before {  width: 100%;}

.blog{background: rgba(var(--bs-light-rgb),var(--bs-bg-opacity))  url(../images/bg2.png) center center/cover no-repeat scroll !important; position: relative;}
.blog .shake-image{position: absolute; z-index: 1;}
.blog .shake-image.img-1{top: 40%; left: 5%;  -webkit-animation:  hinge 25s linear infinite;
  -moz-animation: hinge 25s linear infinite;
  animation: hinge 15s linear infinite;}
.blog .shake-image.img-2{top: 25%; right: 5%;  -webkit-animation:  shake 25s linear infinite;
-moz-animation: shake 25s linear infinite;
animation: shake 25s linear infinite; z-index: 1;}
.blog .shake-image.img-3{bottom: 20%; right: 5%;  -webkit-animation:  fadeIn 3s linear infinite;
  -moz-animation: fadeIn 3s linear infinite;
  animation: fadeIn 3s linear infinite;}
.blog .item .line-container {  position: relative;  width: 100%;  height: 20px;  overflow: hidden;}
.blog  .item .line-container::before {
  content: '';  position: absolute;  top: 0;  left: 0;  width: 0;  height: 100%;  background-color: #0B2051;  transition: width 0.3s ease;}
.blog  .item:hover .line-container::before {  width: 100%;}
  
.up{width: 50px !important; height: 50px !important; z-index: 9999; line-height: 50px;  left: auto;}

.footer{background: transparent url(../images/bg_img.png) center center/cover no-repeat scroll !important; background-color: #009245 !important; position: relative;}
@media (max-width: 768px) {
  .features{margin-top: 30px;}
  .features{  margin-top: 0;}
  .width-50{width: 50% !important;}
  .top-header .item{display: block;}
  .search-from .col{width: 50% !important; display: block;}
  .about-image{position: relative; zoom: .51;}
  .fixed-bg { height: max-content !important;  padding-bottom: 50px;}
  .fixed-bg .item{width: 50% !important;}
  .input-group{display: block !important;}
  .input-group>.form-control, .input-group>.form-floating, .input-group>.form-select{width: 100% !important;}
  .navbar-nav.social{display: none !important; margin: auto;}
  .services .view-sakan .item{width: 33% !important;}
  .fb-slider-title{ margin-bottom:-70px  !important;}

  .profile {position: relative !important;}
  
  .profile .profile-image{
    width: 30% !important;
    height: 30% !important;
    margin-top: -80px;
    margin-right: 35%;
  }
  .profile .profile-info{
    width: 100% !important;
    margin-top: 30px;
    float: none;
  }
  

}

@media (max-width: 1700px) {
	#myCarousel  .carousel-caption .fb-slider-subtitle,.banner  .caption .fb-slider-title{font-size: 20px;		line-height: 22px;	}
}
@media (max-width: 1400px) {
	#myCarousel  .carousel-caption .fb-slider-subtitle,.banner  .caption .fb-slider-subtitle {		font-size: 16px;		line-height: 18px;	}
	#myCarousel  .carousel-caption .fb-slider-desc,.banner  .caption .fb-slider-desc{		font-size: 16px;		line-height: 26px;	}
	#myCarousel  .carousel-caption .fb-slider-title{		font-size: 80px;		line-height: 90px;	}
}
@media (max-width: 1199px) {
	#myCarousel  .carousel-caption .fb-slider-title,.banner  .caption .fb-slider-title{		font-size: 60px;		line-height: 70px;		margin: 0 0 15px 0;	}
	#myCarousel  .carousel-caption .fb-slider-desc,.banner  .caption .fb-slider-desc {		font-size: 14px;		line-height: 24px;		margin: 0 0 15px 0;	}
	#myCarousel  .carousel-caption .fb-slider-subtitle,.banner  .caption .fb-slider-subtitle {		font-size: 13px;		line-height: 16px;		padding: 0 0 0 40px;		margin: 0 0 15px 0;
	}
  #myCarousel  .carousel-caption .fb-slider-subtitle::after,.banner  .caption .fb-slider-subtitle::after {		width: 30px;	}
}
@media (max-width: 991px) {
	#myCarousel  .carousel-caption .fb-slider-title,.banner  .caption .fb-slider-title{		font-size: 40px;		line-height: 50px;	}
	#myCarousel  .carousel-caption .fb-slider-desc,.banner  .caption .fb-slider-desc {		font-size: 13px;		line-height: 19px;	}
	#myCarousel  .carousel-caption .fb-slider-slider-button a{		font-size: 13px;		line-height: 18px;		padding: 12px 24px;	}
	#fb-home-slideshow:hover .slideshow .owl-nav .owl-prev {		left: 30px;	}
	#fb-home-slideshow:hover .slideshow .owl-nav .owl-next {		right: 30px;	}
  
  .carousel-caption{bottom: 25% !important;}
  .carousel-bg{height: calc(50vh - 80px) !important;}
}
@media (max-width: 767px) {
  .profile .washlist{position: absolute; top: -40px; left: 0;}
  #myCarousel .carousel-control-prev,
  #myCarousel:hover .carousel-control-prev{		left: 20px;width: 30px;		height: 30px; padding-top: 0;	}
  
  #myCarousel .carousel-control-next,
  #myCarousel:hover .carousel-control-next {		right: 20px;width: 30px;		height: 30px; padding-top: 0;	}
  
  .carousel-control-prev-icon,
  .carousel-control-next-icon{width: 10px;}

	#myCarousel  .carousel-caption .fb-slider-subtitle{display: none;}
	#myCarousel  .carousel-caption .fb-slider-desc,.banner  .caption .fb-slider-desc{	display: none;	}
  
  
.carousel-caption{bottom: 15% !important;}
.carousel-bg{height: calc(50vh - 80px) !important;}
  .navbar-brand{margin:auto;display:block;}
}
@media (max-width: 543px) {
  #myCarousel .fb-slider-title ,.banner  .caption .fb-slider-title{font-size: 30px;	line-height: 34px;	}
  .navbar-brand{margin:auto;display:block;}
}
@media (max-width: 480px) {
  #myCarousel .fb-slider-slider-button a {
		font-size: 12px;
		line-height: 18px;
		padding: 7px 12px;
	}
  /* .item{width: 50%;} */
  #myCarousel  .fb-slider-title,.banner  .caption .fb-slider-title {
		font-size: 30px;
		margin: 0 0 20px 0;
	}
  #myCarousel .carousel-control-prev{
		left: 10px;
	}
  #myCarousel .carousel-control-next {
		right: 10px;
	}

}

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

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


.dropzone {border: var(--bs-card-border-width) solid var(--bs-card-border-color);}
.dropzone .azrak-preview {position: relative;  display: inline-grid; margin: 15px !important;  margin-bottom: 15px !important; }
.dropzone .azrak-preview .azrak-image{position: relative; width: 100%; padding-bottom: 100%;}
.dropzone .azrak-preview .azrak-image.photos{position: relative; width: 100%;  padding-bottom: 100%;}
.dropzone .azrak-preview .azrak-image img{position: absolute; left: 50%;top: 50%; min-height: 100%; width: 100%;-webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);object-fit: cover;object-position: center;}
.dropzone .azrak-preview .azrak-loading{position: absolute; z-index: 5;left: 45%;top: 40%;object-position: center; }
.dropzone .azrak-preview .azrak-loading i{font-size: 2rem; color: #FFF;}
.dropzone .azrak-preview .options-list{position: absolute;  z-index: 5; right: 18px;}
.dropzone .azrak-preview .options-list div{padding: 5px; top: 0px;margin-left: 8px; background: #FFF;cursor: pointer; float: right; }
.dropzone .azrak-preview .options-list div i{cursor: pointer;}
.dropzone .azrak-preview.default-image .options-list div i.fa-star{color: #0077b5;} 
.dropzone .dragon-preview .img-list{ position: absolute; background: #FFF; padding: 0px;
 border-radius: 0; top: 0; left: 0;  z-index: 999;}
.profile .dropzone .dragon-message{margin:15px; text-align: center;padding: 34px; border: 3px dashed #009966; color: #009966; cursor: pointer;}
.profile div.dz-error-mark,.profile div.dz-success-mark,.profile div.dz-details,.profile div.dz-size.profile ,.profile div.dz-filename,.profile .dz-error-message{display: none !important;}


.checkboxs .form-group{ display: inline-block;margin-right: 13px; direction: ltr;}
.checkboxs .form-group input[type="checkbox"] {display: none;}
.checkboxs .form-group input[type="checkbox"] + .btn-group > label span {width: 20px;}
.checkboxs .form-group input[type="checkbox"] + .btn-group > label span:first-child {display: none;}
.checkboxs .form-group input[type="checkbox"] + .btn-group > label span:last-child {display: inline-block;}
.checkboxs .form-group input[type="checkbox"]:checked + .btn-group > label span:first-child {display: inline-block;}
.checkboxs .form-group input[type="checkbox"]:checked + .btn-group > label span:last-child {display: none;}

.parent .card-body{padding:0;}
.parent .form-group{padding:0;margin:0;}


.treeview {margin: 13px 0;padding: 0 15px;}.treeview input{width:21px; height:21px;cursor: pointer;}
.treeview .badge .fa-chevron-down{display: none;}
.treeview .badge .fa-chevron-up{display: block;}
.treeview .badge.collapsed .fa-chevron-down{display: block;}
.treeview .badge.collapsed .fa-chevron-up{display: none;}

.treeview .item .form-group{position: relative;height: 34px; overflow: hidden; border: .005rem solid #ccc; margin-bottom: 3px;}
.treeview .item .form-group .badge{left: 0; top: 0; position: absolute; z-index: 2;height: 110%; border-radius: 0; width:55px;cursor: pointer;}
.treeview .item .form-group label{position: absolute;z-index: 1; cursor: pointer; line-height: 34px; padding: 0 13px; width: 110%; height: 110%;}
.treeview .item .form-group input{ position: absolute; z-index: 2; display: none;}
.treeview .item .form-group input[type=checkbox]:checked + label{ color: #FFF; background: #005b7f;}
.treeview .item .form-group input[type=radio]:checked + label{ color: #FFF; background: #005b7f;}


.radioChoose .item .form-group label{z-index: 1; cursor: pointer; padding: 15px; margin-bottom: 15px;
   display: block;
  width: 100%;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color .1

}

.radioChoose .item .form-group input{ position: absolute; z-index: 2; display: none;}
.radioChoose .item .form-group input[type=radio]:checked + label{ color: #FFF; background: #005b7f;}



.user-input-wrp {  position: relative;  width: auto;}
.user-input-wrp .inputText{font-size: 1rem !important;  padding: 30px 21px 13px  13px !important;}
.user-input-wrp .inputText.with-padding{font-size: 1rem !important;  padding: 30px 21px 13px  40px !important;}

.user-input-wrp .floating-label {  position: absolute;  pointer-events: none;  top: 13px;  right:21px !important;  transition: 0.2s ease all;}
.user-input-wrp input:focus ~ .floating-label,
.user-input-wrp input:not([value='']) ~ .floating-label{top: 8px;  right: 21px !important;  font-size: 13px;  opacity: 1;}

.user-textarea-wrp .floating-label { pointer-events: none;  margin: 13px 21px !important;  transition: 0.2s ease all;}
.user-textarea-wrp textarea{font-size: 1rem !important;  padding: 30px 21px 13px  13px !important; width: 100% !important;}
.user-textarea-wrp textarea:focus ~ .floating-label,
.user-textarea-wrp textarea:not(:focus):valid ~ .floating-label{top: 8px;  right: 21px !important;  font-size: 13px;  opacity: 1;}

.user-input-wrp select:not([option='checked']) ~ .floating-label{top: 8px;  right: 21px !important;  font-size: 13px; opacity: 1;}

.user-input-wrp .add-field-item,.user-input-wrp .action{  position: absolute; left: 0; top: 0; padding: 20px 20px; cursor: pointer;  font-weight: bold;}

.user-input-wrp input[type='number'] {text-align: center; font-weight: bold;}

.user-input-wrp .delete-btn {  position: absolute; cursor: pointer;  top: 13px;  left:21px !important; }
.dropzone .dz-preview .dz-details{
  z-index: 1 !important;
  top: 20px !important;
}


.profile {position: relative;}
.profile .profile-caption {position: absolute; margin-top: -80px; margin-right: 40px;z-index: 111;}
.profile .profile-caption .profile-area{width: 300px; right: 40px;  border: 5px solid #FFF; }
.profile .profile-caption .profile-info{ width: 100%; bottom: 0;}
.profile .change-profile-photo{display: none; position: absolute; top: 25px; left: 0; z-index: 10; cursor: pointer;  }
.profile .loader-profile-photo{ position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%); color: #000; z-index: 11;}
.profile .profile-area:hover .change-profile-photo,.profile .cover-area:hover .change-profile-photo{display: block;}
.profile .profile-content{margin-top: 120px;}


.js-categories + .select2-container {
  width: 100% !important; 
  min-height: 100px;
}
.js-country + .select2-container ,.js-city + .select2-container ,.js-area + .select2-container  {
  width: 100% !important; 
  min-height:auto !important;}
  .select2-container--default .select2-selection{

    margin-top: 30px;
  }

.select2-container--default .select2-selection--multiple {
  height: auto;
  margin-top: 0;
  min-height: 100px;
  width: 100%; 
  padding-top: 30px;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  padding: 0 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 100px;
  width: 100%; 
}
.profile-upload-click{background: #FFF; border-radius: 0 0 5px 5px;  padding: 13px; position: absolute;z-index:99; color:#666;  right:13px; top:0px; font-size:1.5rem; cursor: pointer;}
.profile-upload-click.dz-started{ background: #fff; color: #000;}
.profile-upload-click.dz-started i{top: 0; left: 0; margin-top: 8px; color: #000;}
.profile-upload-click.dz-started img{display: none;}

@media (max-width: 767.98px) {
  .registration-type-group {flex-direction: column;}
  .banner-caption{width: 94%;}
  .registerForm{ position: fixed;  width: 100%; min-height: 100%; top: 0; left: 0;  transform: none; z-index: 10000;    overflow: auto; }
  .auth {height: auto  !important; }
  .auth-bg{height: 100vh  !important; }
  .auth-caption{width:90% !important;}
  .profile .profile-caption {margin-top: -25px; margin-right:20px;}
  .profile .profile-caption .profile-area{width: 150px; right: 20px; }
  .profile .profile-area .change-profile-photo,.profile .cover-area .change-profile-photo{display: block;padding: 3px 8px !important;font-size: small;top: 3px;}
   
  .user-input-wrp .inputText{ padding: 30px 21px 13px  30px  !important;}
  .user-input-wrp input:focus ~ .floating-label
  .user-input-wrp input:not([value='']) ~ .floating-label{top: 8px;  right: 21px !important;  font-size: 13px;  opacity: 1;}

  .user-input-wrp textarea{font-size: 1rem !important;  padding: 40px 21px 13px  13px !important;}
  .user-input-wrp textarea:focus ~ .floating-label,
  .user-input-wrp textarea:not(:focus):valid ~ .floating-label{top: 8px;  right: 21px !important;  font-size: 13px;  opacity: 1;}
    
  .user-input-wrp select:not([option='checked']) ~ .floating-label{top: -8px;  right: 21px !important;  font-size: 13px; opacity: 1;}



 }
 .error-message {
  display: none;
}
 .snackbar {
  visibility: hidden; /* Hide the snackbar by default */
  min-width: 250px; /* Set a minimum width */
  margin-left: -125px; /* Center the snackbar horizontally */
  background-color: #333; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Center text */
  border-radius: 2px; /* Rounded corners */
  padding: 16px; /* Padding */
  position: fixed; /* Fixed position - Sit on top of the page */
  z-index: 1; /* Specify a stack order */
  left: 50%; /* Center the snackbar horizontally */
  bottom: 30px; /* 30px from the bottom */
  /* transition: visibility 0s linear 5s; */
}

.snackbar.show {
  visibility: visible; /* Show the snackbar */
  -webkit-animation: fadein 0.5s, fadeout 0s 5s; /* Fade in and out with animation */
  animation: fadein 0.5s, fadeout 0s 5s;
}

/* Animations */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

.btn-google {  color: #fff;  background-color: #ea4335;  border-color: #fff}
.btn-google:hover {  color: #fff;  background-color: #e12717;  border-color: #e6e6e6}
.btn-google:focus,.btn-google.focus {  box-shadow: 0 0 0 .2rem rgba(255,255,255,.5)}
.btn-google.disabled,.btn-google:disabled {  color: #fff;  background-color: #ea4335;  border-color: #fff}
.btn-google:not(:disabled):not(.disabled):active,.btn-google:not(:disabled):not(.disabled).active,.show>.btn-google.dropdown-toggle {  color: #fff;  background-color: #d62516;  border-color: #dfdfdf}
.btn-google:not(:disabled):not(.disabled):active:focus,.btn-google:not(:disabled):not(.disabled).active:focus,.show>.btn-google.dropdown-toggle:focus {box-shadow: 0 0 0 .2rem rgba(255,255,255,.5)}

.btn-facebook {  color: #fff;  background-color: #3b5998;  border-color: #fff}
.btn-facebook:hover {  color: #fff;  background-color: #30497c;  border-color: #e6e6e6}
.btn-facebook:focus,.btn-facebook.focus {  box-shadow: 0 0 0 .2rem rgba(255,255,255,.5)}
.btn-facebook.disabled,.btn-facebook:disabled {  color: #fff;  background-color: #3b5998;  border-color: #fff}
.btn-facebook:not(:disabled):not(.disabled):active,.btn-facebook:not(:disabled):not(.disabled).active,.show>.btn-facebook.dropdown-toggle {  color: #fff;  background-color: #2d4373;  border-color: #dfdfdf}
.btn-facebook:not(:disabled):not(.disabled):active:focus,.btn-facebook:not(:disabled):not(.disabled).active:focus,.show>.btn-facebook.dropdown-toggle:focus {box-shadow: 0 0 0 .2rem rgba(255,255,255,.5)}

.btn-linkedin {  color: #fff;  background-color: #0077b5;  border-color: #fff}
.btn-linkedin:hover {  color: #fff;  background-color: #005b8a;  border-color: #e6e6e6}
.btn-linkedin:focus,.btn-linkedin.focus {  box-shadow: 0 0 0 .2rem rgba(255,255,255,.5)}
.btn-linkedin.disabled,.btn-linkedin:disabled {  color: #fff;  background-color: #3b5998;  border-color: #fff}
.btn-linkedin:not(:disabled):not(.disabled):active,.btn-linkedin:not(:disabled):not(.disabled).active,.show>.btn-linkedin.dropdown-toggle {  color: #fff;  background-color: #0077b5;  border-color: #dfdfdf}
.btn-linkedin:not(:disabled):not(.disabled):active:focus,.btn-linkedin:not(:disabled):not(.disabled).active:focus,.show>.btn-linkedin.dropdown-toggle:focus {  box-shadow: 0 0 0 .2rem rgba(255,255,255,.5)}

.btn-twitter {  color: #fff;  background-color: #55acee;  border-color: rgba(0,0,0,.2)}
.btn-twitter:focus,.btn-twitter.focus {  color: #fff;  background-color: #2795e9;  border-color: rgba(0,0,0,.2)}
.btn-twitter:hover {  color: #fff;  background-color: #2795e9;  border-color: rgba(0,0,0,.2)}
.btn-twitter:active,.btn-twitter.active,.open>.dropdown-toggle.btn-twitter {  color: #fff;  background-color: #2795e9;  border-color: rgba(0,0,0,.2)}
.btn-twitter:active:hover,.btn-twitter.active:hover,.open>.dropdown-toggle.btn-twitter:hover,.btn-twitter:active:focus,.btn-twitter.active:focus,.open>.dropdown-toggle.btn-twitter:focus,.btn-twitter:active.focus,.btn-twitter.active.focus,.open>.dropdown-toggle.btn-twitter.focus { color: #fff;  background-color: #1583d7;  border-color: rgba(0,0,0,.2)}
.btn-twitter:active,.btn-twitter.active,.open>.dropdown-toggle.btn-twitter {  background-image: none}
.btn-twitter.disabled:hover,.btn-twitter[disabled]:hover,fieldset[disabled] .btn-twitter:hover,.btn-twitter.disabled:focus,.btn-twitter[disabled]:focus,fieldset[disabled] .btn-twitter:focus,.btn-twitter.disabled.focus,.btn-twitter[disabled].focus,fieldset[disabled] .btn-twitter.focus { background-color: #55acee;  border-color: rgba(0,0,0,.2)}
.btn-twitter .badge {  color: #55acee;  background-color: #fff}
.flag-icon.flag-icon-xx {
  background-image: url('../images/logo.svg');
}
.modal-body{max-height: 600px; overflow-y: scroll; overflow-x: hidden;}
.services .options-list{left: 0; z-index: 5;}
#menuFullScreen {
  overflow-y: hidden; /* Default state: no scrolling */
}

#menuFullScreen.fullscreen {
  overflow-y: auto; /* Enable vertical scrolling when in full-screen mode */
}