/* ----------------------------------------------------------------------------------------- */
/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #021f47;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #1a1814;
  border-top-color: #cda45e;
  border-bottom-color: #cda45e;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

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

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


/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/

.rtl-datepicker .react-datepicker-popper {
  z-index: 9999;
}
/* Taller date input, same width */
.date-input {
  height: 56px;              /* 👈 make it taller */
  line-height: 56px;
  padding: 0 16px;
  border-radius: 10px;       /* keep your style */
}

/* Make sure the calendar sits above other UI and has a small gap */
.datepicker-portal .react-datepicker-popper {
  z-index: 9999;             /* on top of headers/overlays */
  margin-top: 8px;           /* tiny space below the input */
}

/* If any parent has overflow that clips, this helps too */
.hotels-search,
.ContentPageInterne,
.TopPage {
  overflow: visible;         /* avoid clipping the popper */
}


.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
  border: 2px solid #cda45e;
}
.back-to-top i {
  font-size: 28px;
  color: #cda45e;
  line-height: 0;
}
.back-to-top:hover {
  background: #cda45e;
  color: #1a1814;
}
.back-to-top:hover i {
  color: #444444;
}
.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}
/*--------------------------------------------------------------
# Top Bar
--------------------------------------------------------------*/
 
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1200px !important;
    width:100%;
    position: relative;
}
 
#topbar {
    backdrop-filter: blur(4px);
    border-bottom: 1px solid var(--color-gray-200);
    box-sizing: border-box;
    width: 100%;
    height: 57px;
    overflow: hidden;
    text-align: center;
    font-size: 16px;
    color: var(--color-white);
    position: relative;
    background:#0A386B;
}
.Homepage #topbar, .Aboutpage #topbar{
    position: absolute;background: transparent
}
#topbar:before{
  content:''; 
}
#topbar .container>div{
}
.righttopmenu{
  float:right
}
.lefttopmenu{
  float:left
}
.menutop{
  list-style:none;
  margin: 8px 0 0;
  padding: 0;
}
.menutop li{
  float:right;
  display:inline-block;
  margin-left: 20px;
  }
.menutop a{
  display:block;
  padding: 7px 0 4px;
  font-size: 13px;
  line-height: 1.86;text-decoration:none;
  color: #fff;border-bottom:1px solid transparent
}
.menutop a:hover, .menutop a.active{color:#ad8c52;border-bottom:1px solid #ad8c52}
.lefttopmenu .social-links a {
    color: #fff;
}
.lefttopmenu .social-links, .phonetop {float: left;padding: 8px;}
a.phone {position:relative;padding-left: 38px;padding-right: 10px;color: #fff;}
a.phone:before {content: url(../image/phone.png);background:#fff;border-radius:50%;position:absolute;left:0;width: 24px;height: 24px;text-align: center;}
#topbar.topbar-scrolled {
  top: -57px;
}
#topbar .contact-info i {
  font-style: normal;
  color: #d9ba85;
}
#topbar .contact-info i span {
  padding-left: 5px;
  color: #fff;
}
#topbar .languages ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  color: #cda45e;
}
#topbar .languages ul a {
  color: white;
}
#topbar .languages ul li + li {
  padding-left: 10px;
}
#topbar .languages ul li + li::before {
  display: inline-block;
  padding-right: 10px;
  color: rgba(255, 255, 255, 0.5);
  content: "/";
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  background:#0A386B;
  position: relative;
  margin: 0;
  padding: 10px 0;
}
.Homepage #header, .Aboutpage  #header {
  background:transparent;
  transition: all 0.5s;
  z-index: 997;
  top: 58px;
  position: absolute;
  left: 0;
  right: 0;
}
#header .container{
  padding:0;
}

#header.header-scrolled {
  top: 0;
  background: #081018;
  position: fixed;min-height: 60px;
}
#header .logo {
}
#header .logo a {
  color: #fff;
}
#header .logo img {
}

/*--------------------------------------------------------------
# Book a table button Menu
--------------------------------------------------------------*/
.book-a-table-btn {
  margin: 0 0 0 15px;
  border: 2px solid #cda45e;
  color: #fff;
  border-radius: 50px;
  padding: 8px 25px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  transition: 0.3s;
}
.book-a-table-btn:hover {
  background: #cda45e;
  color: #fff;
}
@media (max-width: 992px) {
  .book-a-table-btn {
    margin: 0 15px 0 0;
    padding: 8px 20px;
  }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/ 
.navbar {
  padding: 0;
  float: left;
  margin-top: 15px;
  margin-bottom: 15px;
}
#header.header-scrolled .navbar, .mobilepannier{margin-top: 10px;margin-bottom: 5px;}
.navbar ul {
  margin: 0;
  padding: 0;
  display: flow-root;
  list-style: none;
  align-items: center;
}
.mobilepannier{display: none !important;list-style:none;}

.navbar li {
  position: relative;
  float: right;
  margin: 0 8px;
}
.navbar a, .navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  white-space: nowrap;
  transition: 0.3s;
  text-align: center;
  position:relative;
  padding: 0 5px 10px;
  font-size: 13px;
  text-decoration: none;
}
#header.header-scrolled .navbar a, #header.header-scrolled .navbar a:focus {
}
.navbar a i, .navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}
.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
  color: #ad8c52;
}
.navbar a:hover:after, .navbar a.active:after{
  content:'';
  background: #ad8c52;
  width:100%;
  height: 1px;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}
.mobilemenu{display:none;}
.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  border-radius: 4px;
}
.navbar .dropdown ul li {
  min-width: 200px;
}
.navbar .dropdown ul a {
  padding: 10px 20px;
  color: #444444;
}
.navbar .dropdown ul a i {
  font-size: 12px;
}
.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
  color: #cda45e;
}
.navbar .dropdown:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}
.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}
.navbar .dropdown .dropdown:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}
@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }
  .navbar .dropdown .dropdown:hover > ul {
    left: -100%;
  }
}

#navbar li.menu a{color: #fff;display: block;margin-top: -8px;transition:all .3s;font-weight: 600;background: rgba(173, 140, 82, 1);border-radius: 10px;padding: 10px !important;}
#navbar li.menu a:hover, #navbar li.menu a.active{background: #ffffff;color: #000;}
#navbar li.menu a:after{display:none}
 
/**
* Mobile Navigation 
*/

.mobile-nav-toggle {
  color: #fff;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
  margin-top: 0;
  width: 30px;
  height: 30px;
}
.bi-x:before {
    content: "\f00d";
}
.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 55px;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgb(0 0 0);
  transition: 0.3s;
}
.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 30px;
  right: 20px;
  left: 15px;
  z-index: 1000;
    background: url(../image/close.svg) no-repeat center;
    font-size: 0;
    width: 25px;
    height: 25px;
 
}
.navbar-mobile >ul {
  display: block;
  position: absolute;
  top: 15px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 40px 0;
  border-radius: 6px;
  background-color: #fff;
  overflow-y: auto;
  transition: 0.3s;
}
.navbar-mobile a, .navbar-mobile a:focus {
    padding: 10px 20px;
    font-size: 15px;
    color: #000000;
}
.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
  color: #cda45e;
}
.navbar-mobile .getstarted, .navbar-mobile .getstarted:focus {
  margin: 15px;
}
.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}
.navbar-mobile .dropdown ul li {
  min-width: 200px;
}
.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}
.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}
.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
  color: #cda45e;
}
.navbar-mobile .dropdown > .dropdown-active {
  display: block;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
  width: 100%;
  min-height: 310px;
  background: url("../image/mosque_background.png")  repeat-x  top center;
  background-color: #fff;
  position: relative;
  padding: 0;
  margin-top: 115px;
  margin-bottom: 32px;
}
.blockmosquee {
  
}
.img-khadamet{
  margin: 32px auto;
  display: block;
  text-align: center;
}
.blockProgram{
  background: #a2913c url(../image/bg_bloc_gold.png) top center;
  display: block;
  width: 100%;
  min-height: 227px;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
  padding: 31px 24px 20px;
  color: #fff;
  font-size: 16px;
}
 
#hero .container .row {
    display: block;
}

.nav-tabs li a {
    border: 2px solid #fff;
    font-weight: bold;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    padding: 5px 26px 8px;
    color: #fff;
    margin: 0;
    display: block;
}

ul.nav.nav-tabs li a.active {
    background: #fff;
    color: #000;
}

ul.nav.nav-tabs {
    border: 0;
    margin: 0;
    padding: 0;
}

.tab-content {
    padding-top: 30px;
    font-size: 16px;
    overflow: hidden;
}

ul.nav.nav-tabs li {
    margin-left: 8px;
    margin-bottom: 5px;
}


form select  {
    background: #fff;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border: 2px solid #fff;
    padding: 9px 12px 7px 16px;
    color: rgba(109, 113, 127, 1);
    outline: none;
    width: 100%;
    height: 50px;
    margin: 0;
    font-size: 16px;
    border: 1px solid rgba(210, 213, 219, 1);
}
option span{
   color: #ffe460 !important;
}

/*****************/
@media (max-width: 992px) {
  #hero .container {
  padding: 0;
  }
}
#header.header-scrolled .logo {
    margin-top: -14px;
    position:absolute;
    right: 15px;
}
#header.header-scrolled .logo img{margin: 14px 0;max-height: 43px;}

.infoslide {
    position: absolute;
    bottom: 0;
    right: 15px;
    background: rgb(0 0 0 / 40%);
    padding: 45px;
    max-width: 630px;
}
.champ-form {
    margin-bottom: 13px;
    float: right;
}

.BoxCatinfo {
    font-size: 14px;
    padding-top: 10px;
}
.BoxCatinfo .info1 {
    padding-bottom: 20px;
}
label{display: block;margin: 20px 0 10px;}
.form-check {
    padding-left: 0;font-size:13px
}
input.rechercheinput {
    background: #09008e url(../image/search.png) no-repeat left 37px center;
    color: #fff;
    border: 0;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    display: block;
    width: 100%;
    height: 50px;
    margin: 9px 0 0;
}
#hero h1 {
  margin: 0;
  font-weight: bold;
  color: #fff;
  font-size: 60px;
}
#hero h1 span {
  display: block;
  padding-top: 17px;
}
#hero h2 {
  color: #fff;
  font-size: 25px;
  margin: 0 0 20px;
}
#hero .btns {
  margin-top: 30px;
}
#hero .btn-menu, #hero .btn-book {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline-block;
  padding: 12px 30px;
  border-radius: 50px;
  transition: 0.3s;
  line-height: 1;
  color: white;
  border: 2px solid #cda45e;
}
#hero .btn-menu:hover, #hero .btn-book:hover {
  background: #cda45e;
  color: #fff;
}
#hero .btn-book {
  margin-left: 15px;
}
 
/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  overflow: hidden;
}

.section-title h1 {
   font-size:36px;
}

.section-title {
  padding-bottom: 30px;
  position: relative;
  display: flex;
  align-items: center;
}


/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.breadcrumbs {
  padding: 15px 0;
  background: #1d1b16;
  margin-top: 110px;
}
@media (max-width: 992px) {
  .breadcrumbs {
    margin-top: 98px;
  }
}
.breadcrumbs h2 {
  font-size: 26px;
  font-weight: 300;
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}
.breadcrumbs ol li + li {
  padding-left: 10px;
}
.breadcrumbs ol li + li::before {
  display: inline-block;
  padding-right: 10px;
  color: #37332a;
  content: "/";
}
@media (max-width: 768px) {
  .breadcrumbs .d-flex {
    display: block !important;
  }
  .breadcrumbs ol {
    display: block;
  }
  .breadcrumbs ol li {
    display: inline-block;
  }
}
@media(max-width:1300px){
  .playvideo {
    top: 30%;
    width: 80px;
    height: 80px;
}
	.play-btn {
    width: 39px;
    height: 39px;
}
	
 .play-btn::after {
  left: 15px;
  top: 28px;
  width: 38px;
  height: 38px;
  border: 5px solid #fff;
}
 .play-btn::before {
  width: 70px;
  height: 70px;
  border: 17px solid rgb(255 255 255 / 35%);
  top: 12px;
  left: 0;
}
}
/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about {
  position: relative;
  padding: 100px 0 30px;
  margin-bottom: 50px;
}
.blkCatalogue {
    padding: 0 0 30px;
}
.seemore{
  padding: 11px 42px;
  text-align:center;
  margin:10px 0;
  display:inline-block;
  transition:all .3s;
  min-width: 45%;
  background: #09008e;
  color: #fff;
  border: 0;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.seemore2{
  padding: 11px 42px;
  text-align:center;
  margin:10px 0;
  display:inline-block;
  transition:all .3s;
  min-width: 45%;
  float:left;
  background: rgb(6 2 63 / 4%);
  color: #a2913c;
  border: 0;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.seemore:hover{
  background:#072f6f;color:#fff;
}
.BG_hizmat-haj, .bg_newsletter {
    border-radius: 20px;
    background: rgb(162 145 60 / 11%);
    display: flex;
}
.left_BG_hizmat {
    background: #07006d;
    -webkit-border-radius: 20px;
    -webkit-border-top-left-radius: 450px;
    -moz-border-radius: 20px;
    -moz-border-radius-topleft: 450px;
    border-radius: 20px;
    border-top-left-radius: 450px;
    padding: 70px 45px 30px;
    color: #fff;
    display: inline-block;
    float: right;
    width: 57%;
    font-size: 20px;
    position: relative;
}

.left_BG_hizmat >p {
    max-width: 240px;
    text-align: center;
}
.left_BG_hizmat:after{
  content:url(../image/image_alborj.png);
  position:absolute;
  left: -48px;
  bottom: -7px;
  float:right;
}
.right_BG_hizmat{
  padding:55px;
  text-align:left;
  width: 43%;
  float: left;
}
.right_BG_hizmat h1{
  font-size: 24px;
  color: #06023f;
}
/*******************/
.Charikatmanar{background: url(../image/bg.png) no-repeat top right;background-size: cover;/* background-color: var(--color-seashell-100); */width: 100%;padding: 100px 0 122px;margin: 40px auto 80px;}
.Charikatmanar .info{max-width: 522px;line-height: 1.6;}
 .linkCharikatmanar{
   border: 1px solid var(--color-gray-200);
   padding: 8px 30px;
   border-radius: 9px;
   font-size: var(--font-size-18);
   background: var(--color-gray-200);
   display: inline-block;
   margin: 3px 0;
   font-weight: 500;
   color: #fff !important;
   text-decoration: none !important;
 }
.linkCharikatmanar:hover{

  background: #000;
}

.Charikatmanar .container .row {
    display: flex;
    align-content: space-around;
    align-items: stretch;
    flex-wrap: wrap;
}

.box {
    display: block;
    height: 100%;
    text-align: center;
    margin: 0 auto 15px;
    max-width: 300px;
}
.box img {
    margin: 0 auto 30px;
}
 
input{
    padding: 11px 18px;
    text-align: center;
    display: inline-block;
    transition: all .3s;
    color: #000000;
    width: 100%;
    height: 40px;
    outline: none;
}

 
.hotels-search {
  	position: absolute;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	background-color: rgb(0 0 0 / 60%);
  	width: 100%;
  	max-width: 1078px;
  	margin: 0 auto;
  	min-height: 128px;
  	overflow: hidden;
  	color: var(--color-white);
  	padding: 0;
  	display: flex;
  	padding: 16px;
  	flex-wrap: wrap;
  	justify-content: space-evenly;
}
.hotels-search .boxform{
	height: 49px;
	width: 100%;
	max-width: 275px;
}
.hotels-search .boxformsubmit{
	height: 49px;
}
.hotels-search b{
	height: 45px;
	display: block;
	font-weight: normal;
}
.hotels-search-inner input, .boxform select {
  	background-color: rgb(255 255 255);
  	border: 1px solid var(--color-darkslategray-200);
  	box-sizing: border-box;
  	width: 100%;
  	padding: 0 10px;
  	height: 49px;
  	color: #666666;
  	font-size: 15px;
  	font-weight: 300;
  	border-radius: 0;
}
select option {
  background-color: #fff; /* Sets a blue background for all options */
  color: #000; /* Sets white text color for all options */
}

/* You can also target specific options using attribute selectors or classes */
select option[value="1"] {
  background-color: #fff; /* Overrides for options with value="1" */
}
 
select option:hover, select option:focus {  
  background-color: #ad8c52;  
}
.hotels-search-item input {
  	background-color: rgb(255 255 255);
  	border: 1px solid var(--color-darkslategray-200);
  	box-sizing: border-box;
  	width: 100%;
  	height: 49px;
  	color: #fff;
  	padding: 0 10px;
  	font-weight: 200;
  	font-size: 15px;
}
.hotels-search-inner input {
  	border-radius: var(--br-10);
  	background-color: rgb(31, 10, 10);
  	border: 1px solid var(--color-darkslategray-200);
  	box-sizing: border-box;
  	width: 100%;padding: 0 10px;
  	height: 49px;
}
.rectangle-div {
  	background-color: var(--color-burlywood);
  	width: 174px;
  	height: 47px;
  	color: #fff;
  	border: 0;
  	outline: 0;
  	font-size: var(--font-size-20);
  	font-weight: 600;
  	text-align: center;
  	padding: 0;
  	cursor:pointer
}
 .boxform input.rectangle-div[type="text"]{color:#595959 !important;}
  .boxform input.rectangle-div[type="text"]::placeholder {
  color: #595959!important;
}

/* Chrome, Opera, Safari */
 .boxform .rectangle-div.div16[type="text"]::-webkit-input-placeholder {
  color: #595959!important;
}
/* Firefox 19+ */
 .boxform .rectangle-div.div16[type="text"]::-moz-placeholder {
  color: #595959!important;
}

/* Internet Explorer 10+ */
 .boxform .rectangle-div.div16[type="text"]:-ms-input-placeholder {
  color: #595959!important;
}
/* Firefox 18- */
 .boxform .rectangle-div.div16[type="text"]:-moz-placeholder {
  color: #595959 !important;
}
.b4 {
  	font-size: var(--font-size-18);
}
 
.b5 {
  	font-size: var(--font-size-18);
}
 
.b6 {
  	top: 27px;
  	font-size: var(--font-size-18);
} 
.calendar-lines-1-2 {
  	width: 30px;
  	height: 30px;
}

.phone-flip-1-icon {
  	width: 15px;
  	height: 16px;
  	object-fit: contain;
  	margin-right: 8px;
}
.phone-fb-icon { 
  	width: 15px;
  	height: 16px;
  	object-fit: contain;
}
input.submit{
    padding: 11px 42px;
    text-align: center;
    transition: all .3s;
    color: #fff;
    border-radius: var(--br-10);
    background-color: var(--color-burlywood);
    width: 120px;
    height: 41px;
    border: 0;
}

.img_footer {
      float: none !important;
          padding: 50px 0 0 !important;
    clear: both;

      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      flex-wrap: nowrap;
    }
    .img_footer .sep {
      display: inline-block;
      width: 1px;                 /* vertical bar */
      height: 56px;               /* long enough */
      background: rgba(255,255,255,0.45);
    }

    /* phones */
    @media (max-width: 640px) {
      .img_footer {
           /* stack logos */
      }
      .img_footer .sep {
                      /* horizontal bar */
      }
      .img_footer img {
        display: block;
        max-width: 220px;         /* optional: keep logos tidy */
        width: 100%;
        height: auto;
      }
    }
/******************/
 
img.presentation {
    border-radius: 36px;
    box-shadow: 0 30px 90px 0 rgb(0 0 0 / 25%);
}
img.logo2 {
  position:absolute;
  right: -65px;
  bottom: -47px;
}
.about .about-img::before {
  position: absolute;
  z-index: 1;
  content: "";
  transition: 0.5s;
}
.about .about-img::after {
  position: absolute;
  content: "";
}
.about .about-img:hover {
  transform: scale(1.03);
}
.about .about-img:hover::before {
  left: 10px;
  top: 10px;
}
.about .about-img:hover::after {
  right: 10px;
  bottom: 10px;
}
.about .content h3 {
}
.about .content ul {
  list-style: none;
  padding: 0;
}
.about .content ul li {
  padding-bottom: 10px;
}
.about .content ul i {
  font-size: 20px;
  padding-right: 4px;
  color: #cda45e;
}
.about .content p:last-child {
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .about {
  }
}
 
/*--------------------------------------------------------------
# actuality
--------------------------------------------------------------*/
section.Blkmap {
    display: none;
}

section.actuality {
    background: #fefefe;
}
.contentactuality{position:relative;padding: 20px 0;z-index: 0;margin:10px 0;overflow: hidden;}
.contentactuality h3{font-size:16px}
.contentactuality:before {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-image: -moz-linear-gradient(90deg,#191d2a 0,#30364d 75%);
    background-image: -webkit-linear-gradient(
90deg,#f4f4f6 0,#001a8c 60%);
    background-image: -ms-linear-gradient(90deg,#191d2a 0,#30364d 75%);
    opacity: 0;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    -webkit-transform: perspective(400px) rotateX(-90deg);
    -ms-transform: perspective(400px) rotateX(-90deg);
    transform: perspective(400px) rotateX(-90deg);
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
    border-radius: 20px;
    z-index: -1;
}
.testimonial-item:hover .contentactuality:before {
    -webkit-transform: perspective(400px) rotateX(0);
    -ms-transform: perspective(400px) rotateX(0);
    transform: perspective(400px) rotateX(0);
    opacity: 1;
}
.testimonial-item:hover .contentactuality{
    color:#fff;padding:20px 15px 20px;transition:all .3s
}
.testimonial-item:hover div.date{
    color:#fff;
}
.linkleft {
    background: transparent url(../image/puce_jaun.png) no-repeat left center;
    padding-left: 20px;
    font-weight: 500;
    color: #ad8c52; /*var(--color-dodgerblue-100);*/
    text-align: center;
    display: inline-block;
    height: 100%;
    margin-right: 100px;
    padding-left: 35px;
}
.testimonials-slider {
    padding-bottom: 50px;
}
.swiper-pagination-bullet-active {
    background-color: var(--color-dodgerblue-100);
}
.date{
   color: #666;
   font-size:13px
}
.testimonial-item {
    padding: 20px 0 0;
    display: block;
    position: relative;
    max-width: 452px;
    margin: 0 auto;
    transition: all .3s;
}
.testimonial-item:hover{padding-top:0}
img.testimonial-img {
    margin: 0 auto;
    width: 100%;
}
.topboximg {
    position: absolute;
    top: 0;
    right: 24px;
    left: 24px;
}

.boximg {
    position: relative;
}
.boximg .nbrjour, .imgA + .nbrjour{
  background:rgba(20, 123, 233, 1);
  position:absolute;
  top: 20px;
  right: 25px;
  color: #fff;
  border-radius: 8px;
  padding: 7px 20px;
  z-index: 1;
}

.boxsar {
    position: absolute;
    left: 16px;
    bottom: 16px;
    text-align: center;
    color: #fff;
}

.numbersar {
    display: block;
    padding: 3px 12px;
    border-radius: 8px;
    background: #09008e;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 6px;
}

.numbersar span {
    display: block;
    font-size: 10px;
}

.etatsar {
    padding: 4px;
    border-radius: 8px;
    background-color: #2a2a2a;
    font-size: 10px;
    min-height: 25px;
    display: block;
}
.topboximg div {
    background: #fff;
    display: inline-block;
    width: 49px;
    height: 56px;
    padding: 5px 1px;
    float: right;
    margin-left: 6px;
    text-align: center;
}
div.date{
  background: url(../image/calendar.png) no-repeat right center;
  font-size: 14px;
  color: #666;
  padding-right: 18px;
}
 
.linkpuce{display: block;padding: 7px 0 11px;}
.linkpuce1{
    background: url(../image/makkah.png) no-repeat center;
    display: inline-block;
    float: right;
    width: 25px;
    height: 25px;
}
.linkpuce2{
    background: url(../image/madinah.png) no-repeat center;
    display: inline-block;
    float: right;
    width: 25px;
    height: 25px;
    margin: 0 10px;
}
.linkpuce3{
    background: url(../image/transport.png) no-repeat center;
    display: inline-block;
    float: right;
    width: 25px;
    height: 25px;
}
section#menu3 h3{
  font-size:18px;
  font-weight:bold;
  line-height: inherit;
}
/*--------------------------------------------------------------
# information
--------------------------------------------------------------*/


section.information{
  background: url(../images/bg2.jpg) no-repeat center fixed;
  background-size:cover;
  position: relative;
  color:#fff;
  padding: 80px 0;
}
section.information:before{
  content:'';background:rgb(0 8 39 / 0.43);position:absolute;top:0;left:0;width:100%;height:100%
}
section.information h1{
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  color: #fbad02;
  border: 10px solid #fff;
  padding: 21px 33px 21px 34px;
  display: inline-block;
  max-width: 330px;
  line-height: 1.38;
}
.contentformation{
  max-width: 580px;
  line-height: 1.88;
  background: url(../image/bg_box.png) no-repeat center bottom;
  min-height: 270px;
  padding-top: 107px;
  padding-bottom: 0;
}
.blkinfo {
    float: left;
    display: flow-root;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-top: 25px;
}
.blkinfo>div {
    float: right;
}
.blkinfo .box{
  padding:0 30px
}
.blkinfo .chiffre{
  font-size:68px;
  font-weight:bold
}
.blkinfo h4 {
    font-size: 19px;
    font-weight: bold; 
}
.blkinfo>div {
    float: right;
} 
 

/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials .testimonials-carousel, .testimonials .testimonials-slider {
  overflow: hidden;
}
.testimonials .testimonial-item {
  box-sizing: content-box;
  min-height: 320px;
}
.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50%;
  margin: -40px 0 0 40px;
  position: relative;
  z-index: 2;
  border: 6px solid rgba(255, 255, 255, 0.2);
}
.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 45px;
  color: white;
}
.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 0 45px;
}
.testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right {
  color: #d3af71;
  font-size: 26px;
}
.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}
.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
}
.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 15px 0 15px;
  padding: 20px 20px 60px 20px;
  background: #26231d;
  position: relative;
  border-radius: 6px;
  position: relative;
  z-index: 1;
}
.testimonials .swiper-pagination {
  margin-top: 30px;
  position: relative;
}
.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.4);
  opacity: 1;
}
.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #cda45e;
}

/*--------------------------------------------------------------
# Gallery
--------------------------------------------------------------*/
.gallery .gallery-item {
  overflow: hidden;
  border-right: 3px solid #454035;
  border-bottom: 3px solid #454035;
}
.gallery .gallery-item img {
  transition: all ease-in-out 0.4s;
}
.gallery .gallery-item:hover img {
  transform: scale(1.1);
}
 
 
@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  background: rgba(20, 33, 108, 1) url(../image/footer.jpg) repeat-x top center;
  background-size: cover;
  padding: 37px 0;
  font-size: 14px;
  overflow: hidden;
  color: #fff;
}
#footer h2{
  font-size: 30px;
  font-weight: bold; 
  color: #002f6f;
  margin:0 0 50px
}
#footer h5{
  font-size: 18px;
  /* font-weight: bold; */
  margin:0 0 20px;
}
#footer .row {
  display:block;
}
#footer .row > div{
  float: right;
}
#footer   ul li{
  margin-right: 9px;
}
#footer .footer-info  ul{
  /* display:flex */
  margin: 0;
  padding: 0;
}
#footer .footer-info  ul li{
    display:inline-block;
    margin-bottom: 10px;
}
 
#footer .footer-top .footer-info {
  margin-bottom: 30px;
}
#footer .phone, #footer .email {
   position:relative;
   padding-right:56px;
   font-size: 18px;
   /* font-weight: bold; */
   line-height: 2.67;
   color: #333;
}
#footer .phone:before{
  content:'';
  background: rgba(0, 47, 111, 0.19) url(../images/call.png) no-repeat center;
  position:absolute;
  right:0;
  top: 0;
  width:46px;
  height:46px;
  border-radius:50px;
}
#footer .email:before{
  content:'';
  background: rgba(0, 47, 111, 0.19) url(../images/mail.png) no-repeat center;
  position:absolute;
  right:0;
  top: 0;
  width:46px;
  height:46px;
  border-radius:50px;
}
#footer .footer-top .social-links a {
  font-size: 18px;
  display: inline-block;
  background: rgb(255 255 255 / 10%);
  color: #fff;
  line-height: 1;
  padding: 2px 0 0;
  margin-right: 6px;
  border-radius: 50%;
  text-align: center;
  width: 24px;
  height: 24px;
  transition: 0.3s;
}
#footer .footer-top .social-links a:hover {
  background: #f4f2e9;
  color: #000;
  text-decoration: none;
}
#footer .footer-top h4 {
  position: relative;
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 20px;
}
#footer .footer-top .footer-links {
  margin-bottom: 30px;
}
#footer .footer-top .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#footer .footer-top .footer-links ul i {
  padding-right: 2px;
  color: #cda45e;
  font-size: 18px;
  line-height: 1;
}
#footer .footer-top .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}
#footer .footer-top .footer-links ul li:first-child {
  padding-top: 0;
}
#footer .footer-top .footer-links ul a {
  color: #fff;
  transition: 0.3s;
  display: inline-block;
  line-height: 1;
}
#footer .footer-top .footer-links ul a:hover {
  color: #cda45e;
}
#footer .footer-top .footer-newsletter form {
  margin-top: 30px;
  background: #28251f;
  padding: 6px 10px;
  position: relative;
  border-radius: 50px;
  border: 1px solid #454035;
}
#footer .footer-top .footer-newsletter form input[type=email] {
  border: 0;
  padding: 4px;
  width: calc(100% - 110px);
  background: #28251f;
  color: white;
}
#footer .footer-top{
  margin: 0 0 10px;
  overflow: hidden;
}
#footer .footer-top .footer-newsletter form input[type=submit] {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  border: 0;
  background: none;
  font-size: 16px;
  padding: 0 20px 2px 20px;
  background: #cda45e;
  color: #fff;
  transition: 0.3s;
  border-radius: 50px;
}
#footer .footer-top .footer-newsletter form input[type=submit]:hover {
  background: #d3af71;
}
#footer .copyright {
  text-align: center;
  clear: both;
  display: block;
  background: #000;
  background-color: rgb(255 255 255 / 5%);
  border-radius: 48px;
  padding: 20px;
  overflow: hidden;
}

ul.menufooter {
    padding: 0;
    columns: 2;
    margin: 0;
}

ul.menufooter li {
    padding: 4px 0;
    position: relative;
}
ul.menufooter li a{color:#fff; text-decoration:none}
ul.menufooter li a:hover, ul.menufooter li a.active{color:#ad8c52;border-bottom:1px solid #ad8c52}

ul.menufooter li:after {
    /*
    content: '';background: #000;width: 1px;height: 100%;display: block;position: absolute;top: 0;left: -5px;
    */
}

ul.menufooter li:last-child:after {
    display: none;
}

.accordion {
  width: 100%;
  margin: 0 auto;
  border-radius: 5px;
  position: relative;
}

.accordion-header,
.accordion-body {
  background: white;
}

.accordion-header {
  padding: 22px 25px;
  background: rgba(243, 244, 246, 1);
  cursor: pointer;
  font-size: 16px;
  transition: all .3s;
  text-transform: uppercase;
  border-radius: 8px;
  position: relative;
}

.accordion__item {margin-bottom: 8px;}

.accordion__item .accordion__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.accordion-header:hover {
  position: relative;
  z-index: 5;
}

.accordion-body {
  display: none;
}

.accordion-body__contents {
  padding: 1.5em 1.5em;
  font-size: .85em;
}

.accordion__item.active:last-child .accordion-header {
  border-radius: none;
} 
.accordion__item > .accordion-header:after {
  content: "\f106";
  font-family: 'FontAwesome';
  left: 10px;
  position: absolute;
  top: 15px;
  transition: .3s all;
  transform: rotate(-180deg);
}

.accordion__item.active > .accordion-header:after {
  transform: rotate(0deg);
}

.accordion__item.active .accordion-header, .accordion-header:hover {
  background: #041a32;
  color: #fff;
  position: relative;
}

.accordion__item .accordion__item .accordion-header {
  background: #f1f1f1;
  color: #353535;
}

 .rootPackageDetails > .TopPage, .rootHotel> .TopPage {
    padding-top: 50px;
}
 
	.route-umrah .ContentPage .price {
    font-size: 34px;
    color: #147BE9;
    font-weight: 600;
    position: absolute;
    left: 20px;
    top: 46px;
}

.route-umrah .ContentPage h1 {
    border: 0;
    margin: 0;
}

/******************************************************/
/*************************About page*****************************/
header.Aboutpage{
}
section.slide.aboutslide{position:relative;padding: 0;max-height: 1040px;color:#fff}
section.slide.aboutslide img{}
section.slide.aboutslide:before {
    content: '';
    background: rgb(0 0 0 / 60%);
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    position: absolute;
}
.title-aboutslide{position:absolute;left:0;right:0;margin:0 auto;max-width:1400px;top:37%}
.title-aboutslide h1, .title-aboutslide p{
	max-width:650px;line-height:1.7
}
.title-aboutslide h1{font-size:32px}
.title-aboutslide p{}
section.about.blk1 {
    padding: 100px 0;
    line-height: 1.7;
    background: #fff;
    margin: 0;
}

section.about.blk1 h2 {
    font-weight: 700;
    font-size: 32px;
    color: #394050;
    margin: 0 0 20px;
    max-width: 530px;
}

section.about.blk2 {
    padding: 52px 0 32px;
    margin: 0;
}

section.about.blk2 .Box {
    margin: 0 auto 20px;
    text-align: right;
}

section.about.blk2 .Box .camping-1-icon {
    width: 100%;
    max-width: 100%;
    max-height: 120px;
}
section.about.blk3 {
    background: #fff;
    line-height: 1.7;
    padding: 50px 0 0;
    z-index: 0;
    margin: 0;
}
.texttakiim h2 {
    font-size: 32px;
    color: #147BE9;
    font-weight: 700;
    line-height: 1.6;
    margin: 0 0 20px;
    max-width: 520px;
}

.texttakiim {
    padding-top: 100px;
}
section.about.blk3:before {
    content: '';
    background: rgba(249, 244, 236, 1);
    bottom: 0;
    left: 0;
    right: 0;
    height: 71%;
    position: absolute;
    padding: 0;
    margin: 0;
}
section.about.blk4 {
    background: #fff;
    padding: 120px 0 200px;
    margin: 0;
}
section.about.blk4:before {
    content: url(../image/bg_left_content.svg);
    position:absolute;
    top: 0;
    left: 0;
}
section.about.blk4:after {
    content: url(../image/bg_right_content.png);
    position:absolute;
    bottom: -5px;
    right: 0;
}


.textequipe h2 {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 20px;
    color: #394050;
}

.textequipe {
    line-height: 1.7;
    color: #4D5461;
    padding-top: 80px;
}
section.about.blk5 {
    background: linear-gradient(93.12deg, #147be9, #0a386b);
    padding: 72px 0;
    color: #fff;
    line-height: 1.7;
    margin: 0;
}

h2 {}

section.about.blk5 h2 {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 20px;
}

section.about.blk6 {
    background: #fff;
    text-align: center;
    margin: 0;
    padding: 80px 0;
}

section.about.blk6 h2 {  
font-size: 32px;   
    font-weight: 700;
color: #147BE9; margin:0
}
/*********************************************************/
/************************** FFAQ *****************************/
.TopPage.Titlepage {
    background: #F7F3ED;
    text-align: center;
    padding: 80px 0;
    margin: 0 0 50px;
}
.TopPage.Titlepage h1{
    border: 0;
    text-align: center;
    display: block;
    color: #394050;margin: 0;
    padding: 0;
}

 .faqblk1{padding:20px 0 0;margin-bottom: 50px;}
.faqblk2{padding: 80px 0;text-align: center;border-top: 2px solid #D2D5DB;margin-top: 50px;font-size: 20px;}
section.faqblk2 h2 {
    font-size: 32px;
    font-weight: 600;
    margin: 0 0 30px;
}

section.faqblk2 p {
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

section.faqblk2 .linkblue {
    background: #147BE9;
    margin: 30px auto 0;
    display: inline-block;
    color: #fff;
    padding: 10px 30px;
    border-radius: 5px;
    text-decoration: none;
}

section.faqblk2 .linkblue:hover {
    background: #000;
    color: #fff;
}
.faq .topic{
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.7);
}

.faq .content input{
  display: none;
}

.faq .content{display: flex;align-items: flex-start;}

.faq .content .list{
  display: flex;
  flex-direction: column;
  position: relative;
}

.faq .content .list label{
  background: url(../image/flsh_left.png) no-repeat left center;
  cursor: pointer;
  height: 42px;
  line-height: 1.2;
  font-size: 16px;
  padding-top: 11px;
  font-weight: 400;
  padding-left: 25px;
  transition: all 0.5s ease;
  z-index: 10;
  margin: 0 0 5px;
  color: #4D5461;
}

#general:checked ~ .list label.general,
#payment:checked ~ .list label.payment,
#visa:checked ~ .list label.visa,
#service:checked ~ .list label.service,
#conseil:checked ~ .list label.conseil{
  color: #AD8C52;
}

.faq .content .slider{
  position: absolute;
  left: 0;
  top: 0;
  height: 42px;
  width: 100%;
  transition: all 0.5s ease;
  background: #E9E1D2;
}

#general:checked ~ .list .slider{
  top: 0;
}
#payment:checked ~ .list .slider, #makkh:checked ~ .list .slider{
  top: 47px;
}
#visa:checked ~ .list .slider, #muna:checked ~ .list .slider{
  top: 93px;
}
#service:checked ~ .list .slider, #arafat:checked ~ .list .slider{
  top: 140px;
}
#conseil:checked ~ .list .slider, #musdalifa:checked ~ .list .slider{
  top: 188px;
}
#muna2:checked ~ .list .slider{
  top: 235px;
}#odh7ya:checked ~ .list .slider{
  top: 282px;
}#tawaf:checked ~ .list .slider{
  top: 329px;
}#muna3:checked ~ .list .slider{
  top: 376px;
}#dhihija11:checked ~ .list .slider{
  top: 423px;
}#dhihija12:checked ~ .list .slider{
  top: 470px;
}#dhihija13:checked ~ .list .slider{
  top: 517px;
}
.faq .content .text-content{
  height: 100%;
  padding-right: 50px;
  padding-bottom: 30px;
}
.faq .content .text-content:before{
	content:'';
  background:#D2D5DB; width:1px;height:100%;position:absolute;right:20px;top:0
}

.faq .content .text{
  display: none;
}

.faq .content .text .title{
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: 600;
  color: #394050;
}

.faq  .text p{
  text-align: justify;
}

.faq .content .text-content .general{
  display: block;
}

#general:checked ~ .text-content .general,
#payment:checked ~ .text-content .payment,
#visa:checked ~ .text-content .visa,
#service:checked ~ .text-content .service,
#conseil:checked ~ .text-content .conseil{
  display: block;
}

#payment:checked ~ .text-content .general,
#visa:checked ~ .text-content .general,
#service:checked ~ .text-content .general,
#conseil:checked ~ .text-content .general{
  display: none;
}
 
 
#general:checked ~ .text-content .general,
#makkh:checked ~ .text-content .makkh,
#muna:checked ~ .text-content .muna,
#arafat:checked ~ .text-content .arafat,
#musdalifa:checked ~ .text-content .musdalifa,
#muna2:checked ~ .text-content .muna2,
#odh7ya:checked ~ .text-content .odh7ya,
#tawaf:checked ~ .text-content .tawaf,
#muna3:checked ~ .text-content .muna3,
#dhihija11:checked ~ .text-content .dhihija11,
#dhihija12:checked ~ .text-content .dhihija12,
#dhihija13:checked ~ .text-content .dhihija13{
  display: block;
}

#makkh:checked ~ .text-content .general,
#muna:checked ~ .text-content .general,
#arafat:checked ~ .text-content .general,
#musdalifa:checked ~ .text-content .general,
#muna2:checked ~ .text-content .general,
#odh7ya:checked ~ .text-content .general,
#tawaf:checked ~ .text-content .general,
#muna3:checked ~ .text-content .general,
#dhihija11:checked ~ .text-content .general,
#dhihija12:checked ~ .text-content .general,
#dhihija13:checked ~ .text-content .general{
  display: none;
}
.faq .content .list label:hover{
  color: #AD8C52;
}

.faq  .accordion__item {
    /* border-bottom: 1px solid #D2D5DB; */
}
.faq .accordion.js-accordion .accordion__item:last-child { 
    border-bottom: none
}

.faq .accordion__item  .accordion-header {
   /* background: transparent !important; */
   padding: 10px 9px 10px 40px!important;
   font-size: 18px;
   font-weight: 500;
   color: #394050 !important;
   background: rgb(233 225 210 / 30%);
} 
.faq .accordion-body__contents {
    padding: 0 0 20px 40px;
}
.faq .accordion__item.active:last-child .accordion-header {
   background: transparent; 
   color: #394050;
  
} 
.contentHaj {
    border-bottom: 1px solid #AD8C52;
    padding: 10px 0 30px;
    margin-bottom: 30px;
    color: #4D5461;
    line-height: 1.6;
}

.contentHaj h4 {
    font-size: 20px;
    color: #394050;
    margin-bottom: 15px;
    font-weight: 600;
}

.contentHaj ul {
    margin: 0;
    padding: 0 17px;
    font-size: 16px;
}
.faqblk1 .accordion-header {
    padding: 14px 25px;
}
.accordion-body__contents .contentHaj:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}

.faq .content .text-content .text .contentHaj:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}
@media(min-width:768px){.faqResponsive { display:none}}
@media(max-width:767px){.faqResponsive { display:block} .faqWeb { display:none}}

.rootHaj .TopPage{
	background:url(../image/slidepage/haj.jpg) no-repeat top center;
	width:100%;height:400px;position:relative;padding:0
}
.rootHaj .TopPage:before, .rootmajdnabawi .TopPage:before, .rootomra .TopPage:before{content:'';background:rgb(0 0 0 / 60%);position:absolute;top:0;right:0;width:100%;height:100%}
.rootHaj .TopPage .container, .rootmajdnabawi .TopPage .container, .rootomra .TopPage .container{position:absolute;left:0;right:0;text-align:center;top: 160px;color:#fff;padding: 0;margin: 0;font-size: 32px;margin: 0 auto;}
.rootHaj .TopPage h1, .rootmajdnabawi .TopPage h1, .rootomra .TopPage h1{color:#fff}
.rootHaj .TopPage p, .rootmajdnabawi .TopPage p, .rootomra .TopPage p{font-size:20px;padding:10px }

/***************************************************/
/*************************زيارة المسجد النبوي************************/
.rootmajdnabawi .TopPage{
	background:url(../image/slidepage/masjidnabawi.jpg) no-repeat top center;
	width:100%;height:400px;position:relative;padding:0
}
.rootomra .TopPage{
	background:url(../image/slidepage/omra.jpg) no-repeat top center;
	width:100%;height:400px;position:relative;padding:0;margin:0
} 
.BoxSlectCat.boxmajdnabawi span.nbremasjd, .BoxSlectCat.boxomra  span.nbremasjd{
    font-size: 48px;
    color: #AD8C52;
    display: block;
    font-weight: 600;
}

.BoxSlectCat.boxmajdnabawi h3, .BoxSlectCat.boxomra h3 {
    font-size: 32px;
    font-weight: 600;
    color: #394050;
}

.BoxSlectCat.boxmajdnabawi, .BoxSlectCat.boxomra  {
    font-size: 16px;
    color: #4D5461;
    line-height: 1.6;
    margin: 30px 0;padding: 35px;
}

.rootmajdnabawi .ContentPage h2, .rootomra .ContentPage h2 {
    font-size: 32px;
    font-weight: 700;
    padding: 30px 0 10px;
}

section.ContentPageInterne.rootmajdnabawi, section.ContentPageInterne.rootomra {
    color: #4D5461;
    font-size: 16px;
}

section.about.blk2 h2 {
    font-size: 32px;
    font-weight: 700;
    padding: 30px 0 10px;
    color: #394050;
}

.rootmajdnabawi section.about.blk1 h2 {
    margin: 0 0 5px;
}

.rootmajdnabawi section.about.blk1 ul {
    padding: 0 0 20px;
    list-style: none;
}

.rootmajdnabawi section.about.blk1 ul li:before {
    content: '';
    background: #4D5461;
    width: 15px;
    height: 15px;
    border-radius: 50px;
    display: block;
    position: absolute;
    right: 0;
    top: 6px;
}

.rootmajdnabawi section.about.blk1 ul li {
    position: relative;
    padding-right: 40px;
    margin-bottom: 14px;
}

section.ContentPageInterne.rootomra {}

section.ContentPageInterne.rootomra .Box.boxsonan {
    font-size: 14px;
    color: #394050;
    padding: 20px;
}


section.ContentPageInterne.rootomra .Box.boxsonan .camping-1-icon {
    max-width: 100%;
    padding: 13px;
    max-height: 120px;
    float: none;
    margin: 0 0 20px;
}
/***********************************************/
section.ContentPageInterne.privacypage {
    padding-bottom: 100px;
}
section.ContentPageInterne.privacypage a{
    color:#ad8c52
}
.privacypage h2{
	font-size:24px;
	font-weight:600;
	color: #394050;
	padding: 0 0 20px;
	margin: 30px 0 0;
}
.privacypage h2 + p{}
.privacypage ol > li{
    padding-bottom: 20px;
}
.privacypage ol> li strong{
    padding-bottom: 13px;
    display: block;
    color: #4D5461;
}
.privacypage ol> li ul{list-style: initial;padding: 0 10px;}
.privacypage ul{list-style: initial;padding: 0 20px;}



.rootGaleryAlMaanr{padding:0 0 100px}
.rootPackageDetails .TopPage{padding:40px 0}

section.ContentPageInterne.ContactPage .Box .camping-1-icon {
    padding:0
} 

section.ContentPageInterne.ContactPage .Box {
    padding: 25px 40px;
    font-size: 16px;
    background: #f9f4ec;
    color: #4D5461;
    min-height: 259px;
}

section.ContentPageInterne.ContactPage .Box h3 {
    color: #394050;
}
section.ContentPageInterne.ContactPage {}

section.ContentPageInterne.ContactPage h2 {
    padding: 0 0 10px;
}

.Formulaire {
    border: 1px solid #D2D5DB;
    border-radius: 10px;
    padding: 50px 30px;
    font-size: 16px;
} 
.Formulaire h2 + p{max-width:485px;}
.Formulaire label {
    color: #394050;
    font-size: 16px;
    font-weight: 600;
}

.Formulaire label span {
    color: #9EA2AE;
}
.Formulaire input[type="text"], .Formulaire input[type="tel"], .Formulaire input[type="email"], .Formulaire input[type="number"], .Formulaire textarea {
    border: 1px solid #D2D5DB;
    border-radius: 6px;
    text-align: right;
}
.Formulaire input[type="text"]:hover,
.Formulaire input[type="tel"]:hover, .Formulaire input[type="email"]:hover,
.Formulaire input[type="number"]:hover, .Formulaire textarea:focus-visible,
.Formulaire textarea:hover{ 
  border-color:     #9b7a43 !important; 
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* For Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}
textarea {
    width: 100%;height:150px
}
iframe{
   border-radius: 10px;  
}

section.contactblk1 {
    text-align: center;
} 
.datetravail {
    font-size: 24px;
    font-weight: 500;
    color: #394050;
    padding: 0 0 10px;
}

.heuretravail {
    display: block;
    padding: 0 0 40px;
}
section.contactblk2 {
    padding: 30px 0;
}
section.contactblk3 {
    background: #F7F3ED;
    display: block;
    clear: both;padding: 80px 0;
    text-align: center;
}
section.contactblk3 .socialmedia {
    display: flex;gap:50px;
    justify-content: center;
}
section.contactblk3 h3 {
    font-size: 32px;
    color: #394050;
    padding: 0 0 30px;
}

section.contactblk3 .fa, section.contactblk3 .fab {
    font-size: 32px;
    margin: 0 10px;
    text-decoration:none;color:#007bff
}
section.contactblk3 .fa:hover, section.contactblk3 .fab:hover {
    color:#000
}
.fa-x-twitter::before{
	content:"𝕏";
	font-size:1.2em;
}
section.contactblk4 {
    display: block;
    clear: both;padding: 60px 0;
    text-align: center;font-weight:600;font-weight:26px;color:#394050
}

	.rootHotels .BLkTabs label {
    display: none;
}
/******************************************************/
/******************************************************/

@media screen and (max-width: 1000px) {
 
  .accordion {
    width: 100%;
  }
}

/******************/
.carousel-control-next, .carousel-control-prev{
  bottom: -135px !important;
  top: inherit;
  background: rgb(255 255 255 / 10%);
  border-radius: 50%;
  width: 95px;
  height: 95px;
}
.carousel-control-next {
    right: -150px;
}
.carousel-control-prev {
    left: -150px;
}
.carousel-control-prev-icon {
    background-image: url(../images/left.png);
    width: 40px;
    height: 29px;
}
.carousel-control-next-icon {
    background-image: url(../images/right.png);
    width: 40px;
    height: 29px;
}
.carousel-indicators {
     border-radius: 13px;
     background: rgb(251 173 2 / 20%);
     height: 26px;
     position: absolute;
     bottom: -100px;
     margin: 0;
     left: 0;
     right: 0;
     width: auto;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     -ms-flex-align: center;
     align-items: center;
     -ms-flex-pack: justify;
     justify-content: space-between;
}
 .carousel-indicators li.active:before {
  content:'';
  background: url(../images/maps.png) no-repeat top left;
  position:absolute;
  top: -70px;
  left: -22px;
  width: 57px;
  height: 75px;
}
.carousel-indicators li, .carousel-indicators li.active {
     float: left;
     width: 13px;
     height: 13px;
     border-radius: 50px;
     border: 0;
     background: #ccc;
     box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16);
     background-color: #fbad02;
     margin-top: 5px;
     margin: 6px 5px;
}
.carousel-indicators li.active {
     background: #ffffff;
}

section.pubfooter {
    display: block;
    padding: 0;
    text-align: center;
    margin-top: 50px;
}
.Contentpubfooter{
	position:relative;
	display: inline-block;
	float: right;
	padding: 100px 20px;
}
 

.contentformation .seemore{
    min-width:auto;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  color: transparent;
  background: transparent;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button {
  z-index: -10;
}

input[type="date"]::-webkit-input-placeholder {
  z-index: 99;
}

input[type="date"]:placeholder {
  z-index: 99;
}
input[type="date"]:not(.has-value):before {
  content: attr(placeholder);
  width: 100%;
}

input[type="date"] {
  background: url(../image/date.png) no-repeat center right 20px;
  padding: 12px 20px;
}

/*--SECOND--*/
.pa__top-sec {
  padding: 50px 0;
}
.pa__top-title {
  margin-bottom: 20px;
  color: #455582;
  font: 14px "Gilroy-Extrabold", sans-serif;
}
.pa__middle-range {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 50px;
}
.pa__middle-item {
  margin-right: 10px;
}
.pa__top-sec input[type="date"] {
  border: 0;
  padding: 12px 20px;
  color: #99a2ba;
  font-size: 14px;
}
.Boxwhatsapp{
    position: fixed;
    background: rgba(69, 177, 47, 1);
    left: 15px;
    bottom: 15px;
    z-index: 999;
    width: 60px;
    height: 60px;
    border-radius: 50px;
    transition: all 0.4s;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

/*************************************/

.takiim{position:absolute;left: 0;}


 /* --- Boxes size & layout --- */
.price-range-block > div {
  display: flex !important;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.price-range-block .chmpprice {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.price-range-field {
  width: 110px;
  height: 38px;
  font-size: 15px;
  background: #fff;
  border: 1px solid rgba(158,162,174,1);
  border-radius: 10px;
  text-align: center;
  padding: 6px 28px 6px 8px;
}

.chmpprice span {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #8a8f9a;
  font-size: 13px;
  pointer-events: none;
}

/* --- Slider look (التراك والداير) --- */
.range-slider {
  position: relative;
  height: 32px;
  margin: 8px 0 4px;
  --thumb: 18px; /* حجم الدائرة */
  --track: 6px;  /* سُمك الشريط */
}

.slider-track {
  position: absolute;
  top: 50%;
  left: 0; right: 0;              /* ياخذ عرض الداخل بعد الـ padding */
  height: var(--track);
  background: #e5e7eb;
  border-radius: 999px;
  transform: translateY(-50%);
}

.range-progress {
  position: absolute;
  top: 50%;
  height: var(--track);
  background: #147be9;
  border-radius: 999px;
  transform: translateY(-50%);
  left: 0;                         /* default (يتبدّل inline) */
  width: 0;                        /* default (تتحسب inline) */
  pointer-events: none;
}

.range-slider input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 32px;
  pointer-events: none;
  -webkit-appearance: none;
  background: transparent;
  margin: 0;
}
/* الدواير ديما وسط التراك */
.range-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 50%;
  background: #fff;
  border: 2px solid #147be9;
  margin-top: calc((var(--thumb) - var(--track)) / -2);
  box-shadow: 0 0 0 2px #fff;
}
.range-slider input[type="range"]::-moz-range-thumb {
  pointer-events: all;
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 50%;
  background: #fff;
  border: 2px solid #147be9;
}
/* نشيل تراكات الديفولت متاع الإنبت */
.range-slider input[type="range"]::-webkit-slider-runnable-track {
  height: var(--track);
  background: transparent;
}
.range-slider input[type="range"]::-moz-range-track {
  height: var(--track);
  background: transparent;
}

/* الشريط الأزرق */
.range-progress {
  position: absolute;
  top: 50%;
  height: var(--track, 6px);
  background: #147be9;
  border-radius: 999px;
  transform: translateY(-50%);
  left: 0;           /* default, يُبدَّل inline */
  width: 0;          /* default, تُحسب inline */
}

/* الدواير وسط التراك بالطول */
.range-slider {
  --thumb: 18px;
  --track: 6px;
  position: relative;
  height: 32px;
  margin: 8px 0 4px;
  padding: 0 calc(var(--thumb) / 2);
}.range-slider input[type="range"]::-webkit-slider-thumb {
  margin-top: calc((var(--thumb) - var(--track)) / -2);
}


/********************************/
@media(max-width:1500px){
  section.pubfooter img {
    border-radius: 0;
}
}
@media(max-width:1440px){
.div12 {
    width: 90%;
    margin:0 auto;
    text-align:center;
    display:block;
    top: 50%;
    font-size: 35px;
    left: 0;
    right: 0;
}
.Homepage.Blkheader {
    padding-bottom: 100px;
}

	.gallery { 
    margin: 0 auto;
}
	
}
@media(max-width:1300px){
	.faq .accordion__item .accordion-header { 
    font-size: 18px; 
}
	.faq .content .text .title {
    font-size: 22px;
}

	
	.rootmajdnabawi .TopPage,.rootHaj .TopPage{ height:300px}
	.rootHaj .TopPage  .container, .rootmajdnabawi .TopPage  .container, .rootomra .TopPage  .container{top: 120px;}
}
@media(max-width:1100px){
	.slide img.slide-img {
    -webkit-border-bottom-right-radius: 70px;
    -webkit-border-bottom-left-radius: 70px;
    -moz-border-radius-bottomright: 70px;
    -moz-border-radius-bottomleft: 70px;
    border-bottom-right-radius: 70px;
    border-bottom-left-radius: 70px;
}
.hotels-search .boxform {
    height: 49px;
    width: 100%;
    max-width: 24%;
}
  .Block1 h1, section.ContentPageInterne h1 {
    font-size: 30px; 
}
	.section-title h1{font-size:30px
}
.Block1 h1 +p {
    font-size: 18px; 
}
   .Block1 h3 {
    font-size: 18px;
    /* padding:15px 0 0; */
}
   
  .camping-1-icon {padding: 10px;max-height: 79px;max-width: 79px;}
	.camping-1-icon img {
    max-height: 50px;
}
  .Block1 .Box { 
    padding: 40px 15px 20px;
}
.div27 {
  	font-size: 13px;
  	min-height: 40px;
}
  .hizmat-haj h1, .boutique h1{font-size:30px}
  .rectangle-icon { 
    max-width: 500px; 
}
  .rectangle-parent .Text { 
    font-size:16px
}
  .div60 {
  	font-size: 23px;
}
  .div61 {
    font-size:15px
}
  .linkCharikatmanar { 
    padding: 7px 30px;
    font-size:15px
}
  .gallery {
    column-count: 3;
    column-gap: 10px;
    margin: 0 50px;
}
  .child12 {
    width: 121px;
    max-width: 100%;
}
  .child11 {
    width: 159px; 
    height: 176px; 
}
  .child13 {
    width: 159px; 
}
  .BoxInfoTem {
    font-size: 13px;
}
  .nametemg {
    font-size: 12px;
}
  .div94 {
    font-size: 28px; 
}
  .b28 {
    font-size: 24px;
}
  .img-2625-1-icon {
    max-width: 50%; 
    left: 0px;top:30px
}
  .Contentpubfooter {
    font-size:16px
}
  .div58 {
    font-size: 30px;
    font-weight: 800;
    color: var(--color-white);
}
	.takiim {
    position: relative;
    left: 0px;
    max-width: 210px;
    margin-top: 20px;
}
	ul.menufooter li, ul.menufooter li a{font-size: 12px;}
	section.ContentPageInterne { 
    font-size: 16px; 
}
	.ContentPageInterne h2 {
    font-size: 20px;
    padding: 10px 8px 24px;
}
	.price-range-field {
    width: 90px;
    font-size: 14px;
    padding: 6px 28px 6px 8px;
}
	.price-range-block > div .chmpprice:first-child{
		margin-right:-10px;
}
	.imgA {
    max-height: 379px;
}
	.imgB a:first-child { 
    height: 205px; 
}
	.imgB a:nth-child(2), .imgB a:nth-child(3){
		height: 163px;
	}
	.rmdp-wrapper { 
    width: 100% !important;
}
	.rmdp-day span {
    font-size: 11px !important;
    line-height: inherit !important;
    width: 25px !important;
    height: 25px !important;
}
	.rmdp-day, .rmdp-week-day { 
    height: 20px !important; 
    width: 20px !important;
}
	.custom-calendar .rmdp-week-day {
    font-size: 8px!important;
}
	.rmdp-wrapper { 
    width: 100%!important;
}
}
@media (max-width: 1000px) {
	.price-range-block > div {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 20px auto !important;
    flex-direction: column;
}
	.price-range-block > div .chmpprice:first-child {
    margin-right: 0;
    width: 100%;
    }
	.BlkCalender h3 { 
    font-size: 15px; 
}
	.Subtform {
    padding: 7px 20px;
    font-size: 15px;
}
	.righttopmenu { display:none }
	 .lefttopmenu {
    float: none;
    max-width: 100%;
    flex: 1;
    display: block;
    width: 100%;
}
	.BoxSlectCat .linkpanier {
    padding: 10px 11px;
    font-size: 13px; 
}
	.BoxSlectCat .info2 {
    font-size: 13px; 
}
	.TopPage .infovol {
    background-position: center right;
    padding-right: 30px !important;
}
 .route-umrah .ContentPageInterne> .TopPage {
    padding-top: 30px;
}
 
		  .mobile-nav-toggle {
			display: flex;
			float: right;
			justify-content: center;
			align-content: center;
			align-items: center;
			} 
 
#navbar li.menu {padding:0}
	#navbar li.menu a{margin:0;position: absolute;left: 15px;top: -30px;padding: 10px 25px !important;}
     .navbar {
        margin: 8px;
        display: flex;
        flex-wrap: nowrap;
    }
 
		  .navbar ul {
			display: none;
			} 
	.navbar-mobile ul {
    display: block;
    padding-right: 0;
    margin-right: 0;
}
	 .navbar-mobile li.menuweb{display:none !important}
	.mobilemenu{display:block;float: none !important;margin: 0 !important;padding: 0 !important;}
	  .navbar-mobile .mobilemenu li {
			float: none !important;
			width: 100%;
			position: relative;
			padding: 20px 0 0 !important;
			display: block;
			margin: 0 !important;
		}
		 	.navbar-mobile li a, .navbar-mobile li span {
			text-align: right;
			display: block;
			padding: 4px 30px 4px 20px;
			color: #000;
		}

	.navbar-mobile li span {
		font-weight:bold;
		border-top:1px solid #D2D5DB;
		padding: 20px 30px 4px 20px;
	}
 
	
		.navbar-mobile .lang{padding: 10px 0 0 !important;}
	.navbar-mobile .lang b {color:#000;padding:0 20px;font-weight:normal;width: 90px;display: inline-block;}
	li.lang select {
    width: 75px;
    padding: 2px;
    font-weight: normal;
}

		.header-scrolled nav#navbar {
			margin-top: -10px;
		}
	
	.child5 iframe{width:100%;border-radius:5px}
	.child6 {
    top: inherit;
    position: relative;
    max-width: 90%;
    height: auto;
    z-index: 1;
    margin: 30px auto 0;
}
	Charikatmanar .container .row {
    display: flex;
    align-content: space-around;
    align-items: stretch;
    flex-wrap: nowrap;
}
	#footer .row > div {
    float: none;
    clear:both;
    margin:0 auto 0px;
    width:max-content;
    gap: 1px;
 }
#footer .row > div.img_footer{
    width: 100%;
    padding: 20px 20px !important;
}
	#footer .row > div.col-lg-4{
    padding: 0 0 50px;
}
	#footer .footer-top h4{text-align:center;display: block;}
	.Charikatmanar {
    padding: 100px 0;
    overflow: hidden;
    height: auto;
}
	.div12 { 
        font-size: 25px; 
    }
	.BoxInfoTem {
    padding: 20px 20px;
    max-width: 380px;
    font-size: 12px;
}
}
@media(max-width:900px){
	body{font-size:14px}
	section.ContentPageInterne {
        font-size: 14px;
    }
  .boxform img{max-height:20px;margin-left:10px}
    .div94 {
        font-size: 24px;
    }
	.b28 {
        font-size: 18px;
    }
	.logo img {
    max-width: 180px; 
}
	    .imgA {
        max-height: 340px;
    }
	.imgB a:nth-child(2), .imgB a:nth-child(3) {
        height: 124px;
    }
	.imgB img {
    width: calc(100% + 20px);
    max-width: calc(100% + 20px);
    transform: translate3d(0, -20px, 0);
}
	.imgA a img {
    width: calc(100% + 20px);
    max-width: calc(100% + 20px);
    transform: translate3d(0, -10%, 0);
}
	    .Block1 h1, section.ContentPageInterne h1 {
        font-size: 25px;
    }
	.blkCalenderInfo {
		font-size:14px;
    padding: 30px 15px; 
}
.BoxCOLOR {
    padding: 50px 0 30px; 
	margin-bottom:10px
}	
.blkCalenderInfo .Subtform{ font-size: 16px;padding: 10px 40px;width:100%}
	.Boxvert, .Boxred{font-size:12px;padding: 20px 15px;}
	.Boxvert h3, .Boxred h3 { 
    font-size: 20px; 
}
	form select {
    font-size: 13px;
}
	.custom-calendar .rmdp-week-day {
        font-size: 6px !important;
    }
	.rmdp-header {
    font-size: 12px !important;
}
	    .rmdp-day, .rmdp-week-day {
        height: 15px !important;
        width: 15px !important;
    }
	.faq .content .list label {
    font-size: 12px;
    padding-left: 15px;
    height: 46px;
    padding-top: 18px;
    background-position: left top 12px;
}
	.faq .content .slider {
    height: 44px;
}
#payment:checked ~ .list .slider{
  top: 55px;
}
#visa:checked ~ .list .slider{
  top: 110px;
}
#service:checked ~ .list .slider{
  top: 157px;
}
#conseil:checked ~ .list .slider{
  top: 208px;
}
    .BoxSlectCat .info2 {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
	.BoxSlectCat .info2 span{margin:0 0 10px}
}
@media(max-width:767px){
	    .slide img.slide-img {
        -webkit-border-bottom-right-radius: 0;
        -webkit-border-bottom-left-radius: 0;
        -moz-border-radius-bottomright: 0;
        -moz-border-radius-bottomleft: 0;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }
	    .hotels-search .boxform {
        max-width: 50%;
        height: auto;
        margin: 0  1% 15px;
        float: right;
        width: 47%;
    }
	.hotels-search .boxformsubmit {
    margin-left: 13px;
}
	.hotels-search b {
    height: 35px;
    display: block;
}

	.catalogue-slider .testimonial-item .info2 {
    font-size: 11px;
    font-weight: 300;
    display: flex;
    justify-content: flex-start;
}
	.linkpanier { 
    padding: 10px 25px;  
    border-radius: 5px;
    font-size: 14px; 
}
 .hotels-search {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: -20px;
    border-radius: 0;
 }
	span.infosar { 
    display: block;
    margin: -15px 0 5px 0;
    font-size: 14px;
}
	.catalogue-slider .testimonial-item .info1 {
    padding: 20px 0 10px;
    font-size: 12px;
    font-weight: 500;
}
	.catalogue-slider .testimonial-item .info {
    padding: 20px 15px 24px;
}
	.Block1 .Box {
        max-width:300px
    }
	.rectangle-parent {
    display: block;
    height: auto;
}
.rectangle-icon {
        max-width: 100%;
        margin-top: 10px;
        border-radius: 0;
        -webkit-border-radius: 30px;
        -webkit-border-bottom-right-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
        -moz-border-radius: 30px;
        -moz-border-radius-bottomright: 10px;
        -moz-border-radius-bottomleft: 10px;
        border-radius: 30px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }
	    .hizmat-haj h1, .boutique h1, .section-title h1 {
        font-size: 25px;
    }
	.Charikatmanar .container .row >div{
									   margin: 0 auto 1px;
									   padding: 15px 15px 20px;
									   clear: both;
									   position: relative;
	}
	.child7, .child8{border-right: none;border-bottom: 1px solid #ffffff63;width: 270px;height: 1px;display: block;margin: 0 auto;text-align: center;left: 0;right: 0;bottom: -3px;top: inherit;}
	.child6{padding: 15px 0 !important;background: #0a386b;max-width: 100%;border-right: 0 !important;border-radius: 0;}
	.b24{padding:0 0 }
	.Charikatmanar {
        padding: 50px 0 ;
        overflow: hidden;
        height: auto;
    }
	.Homepage.Blkheader {
        padding-bottom: 50px;
    }
	    .Block1 h1 {
        font-size: 25px;
        margin-bottom: 15px;
    }
	.Charikatmanar{background: url(../image/bg.png) no-repeat top right -150px;background-size: cover; -color-seashell-100); */  
				  }
.div61 {
        font-size: 16px;font-weight:normal;line-height:1.7;margin-top:20px
    }
	    .playvideo {
        top: 25%; 
    }
	 .div12 {
        top:40% !important;
    }
	.price-range-block > div {
        display: flex !important;
        flex-wrap: nowrap;
        justify-content: flex-start;
        flex-direction: row;
    }

	.blkCalenderInfo2 { 
    margin-top: 20px;
}
	.rootHotels .hotels-search {display:none}
	    .imgA { margin-bottom:10px;  }
	.rmdp-calendar{max-width:280px}
	    .blkCalenderInfo {
			margin-top:50px
    }

	.faq .content {
    display: block
}
	.faq .content .text-content { 
    padding-right: 20px; margin-top:30px
}

	.faq .content .text-content:before {display:none}
	    .rootHotels .hotels-search {
        display: none;
    }
	.blkCalenderInfo2 {
    padding: 15px;
}

.blkCalenderInfo2  {
    display: none;
}
	section.ContentPageInterne.rootHotels{padding-top:20px}
/*
	.BlkCalender h2.active + form, .BlkCalender:hover form{display:block}
	*/
	
	
	
	.rootmajdnabawi .TopPage,.rootHaj .TopPage{ height:200px}
	.rootHaj .TopPage .container, .rootmajdnabawi .TopPage  .container, .rootomra .TopPage  .container{top: 70px;}
.rootHaj .TopPage p, .rootmajdnabawi .TopPage p, .rootomra .TopPage p {
    font-size: 15px; 
    padding: 10px;
}

}

@media(max-width:600px){
.Boxtemoignage {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
	.about {
    padding: 50px 0 30px;
}
	    .Block1 .Box {
      text-align:right;
      display: block;
    }
	.Box .camping-1-icon {float:right;display: flex;justify-content: flex-start;margin-left: 20px;}
	    .Block1 h3 {
        font-size: 18px;
        padding: 0 0 0;
        margin:0 0 10px !important
    }
	    .div27 {
        font-size: 14px;line-height:1.6;
        min-height: 40px;
    }
	    .BoxInfoTem {margin:0 auto 24px
    }
	    .gallery {
        column-count: 2;
        column-gap: 5px;
        margin: 0 50px;
    }
	.div59{padding:0 30px}
	.BlkGalery:before { 
    height: 80%;
}
	.Charikatmanar {
        padding: 20px 0 20px;
        overflow: hidden;
        height: auto;
    }
	.hizmat-haj {
    padding: 40px 0;
}
	section.boutique{ padding:0
}
	.child5 img{height: 275px !important;}
.accordion-header {
    padding: 15px 25px !important; 
    font-size: 13px !important; 
}
 
.accordion__item.active > .accordion-header:after {
 /* top: -26px !important; */
 /* left: -15px !important; */
}
.accordion__item > .accordion-header:after {
    /* top: -22px !important; */
    /* left: -10px !important; */
}
    .accordion > .accordion__item:first-child > .accordion-header:after {
        /* top: -2px !important; */
        /* left: -10px !important; */
    }
	
	
	.BlkCalender label {
    margin: 10px 0 0; 
    font-size: 14px;
}
.BoxCatinfo h2 {
    margin: 0 0 20px;
    padding: 25px 10px 0;
    font-size: 18px;
}
	.BoxCatinfo {
    padding: 15px 30px 20px 10px;
}
	.logo img {
    max-width: 150px; 
}
.TopPage .btnlink { 
    margin: 20px 0 0;
}
		
input::-webkit-input-placeholder {
font-size:15px
}

input[type="date"]:placeholder {
  font-size:15px
}
 form select {
    font-size: 14px;
}
	    .hotels-search b {
        font-size: 15px;
        height: inherit;
        padding-bottom: 5px;
    }
.rectangle-div { font-size: 15px;
}
	.rectangle-parent .Text {
    padding: 30px 25px;
    max-width: 100%;
    font-size:18px;
    line-height:1.7
}
	.div6{font-size: 9px;}
	.rectangle-parent .Text .div4{max-width: 100%;font-size: 17px;padding: 9px;}
   
.BoxSlectCat >.row {display:block}
.BoxSlectCat >.row >div {
    width:100%;
    display:block;
    max-width: 100%;
    margin: 0;
    flex: 1;
}
	.BoxCatimg{display: flex; width: 100%;text-align:center;vertical-align:bottom;justify-content: center;align-items: center;align-content: center;flex-wrap: nowrap;}
.BoxCatimg a{
    display: block;
    width: 100%;
}
.BoxCatimg img {  
    display: block;
}
.BoxCatinfoLeft.col-sm-4 div{display:none;height:0}
.BoxCatinfoLeft.col-sm-4 {
    min-height:inherit;text-align:center;margin:0 auto 
}
    .BoxSlectCat .linkpanier {
        width:90%;margin:0 auto
    }
	section.contactblk3 h3{font-size:20px}
	section.contactblk3 .socialmedia {
    gap:15px; 
}
	section.contactblk3 .fa, section.contactblk3 .fab {
    font-size: 28px;
}
}
@media(max-width:500px){
  #topbar{display: none !important;}
	#header {
    top: 0!important;
}
.div12 {
        top: 25% !important;
        line-height: 1.6;
    }
		.boxformsubmit b { 
    display: none;
}
 .child12{height:135px;border-radius:5px}
.child14{height:250px;width:100%}
	    .child13 {
        width: 100%;
        height: 176px;
    }
	.Blktemoignage { 
    padding: 0 20px 50px;
}
	.b28 {
        font-size: 15px;font-weight:normal
    }
	.takiim {
        max-width: 260px;
    }
	.div94 {
        font-size: 17px;
    }
	.catalogue-slider .testimonial-item .infovol {
    background-position: center right 0;      padding-right: 25px !important;
}
	.catalogue-slider .testimonial-item .info2 span{  background-position: center right 5px; 
		padding-right: 30px !important;
	}
		section.ContentPageInterne { 
    font-size: 14px; 
}
  .socialmedia >span {
    width: 15px;
    height: 15px;
    margin: 0 2px;
    font-size: 12px;
}
	    .lefttopmenu {padding:0
    }
.tel a {font-size:12px}
	.top-bar-item {
    width: 21px;
    height: 21px;
    margin-right: 3px;
}
	    .slide img.slide-img {-webkit-border-bottom-right-radius: 0;-webkit-border-bottom-left-radius: 0;-moz-border-radius-bottomright: 0;-moz-border-radius-bottomleft: 0;border-bottom-right-radius: 0;border-bottom-left-radius: 0;height: 470px;margin-right: -260px;max-width:inherit;width:inherit;text-align: center;}
	    .hotels-search {margin-top: -100px;border-radius: 0;background: #000;padding: 20px;width: 100%;}
	    .hotels-search .boxform {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 15px;
    }
	.boxformsubmit, .rectangle-div {width: 100%;margin: 0 auto !important;}
	
	    .playvideo {
        top: 25%;
        display: none;
    }
	.div12 {
      top: 31%;
    }
	    .gallery {
        column-count: 1;
        column-gap: 5px;
        margin: 0 20px !important;
    }
	ul.menufooter {
    /* columns: 1; */
} 
	.gallery .a {
    margin-right: 0;
}
	.gallery .a2 {
    margin-left: 0;
}
	.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 15px;
}
	.hizmat-haj .section-title { 
    padding-bottom: 35px;
}
	    .hizmat-haj h1, .boutique h1, .section-title h1 {
        font-size: 25px;
    }
	.hizmat-haj .section-title h1 +a, .linkleft {
    float:left;
    padding: 7px 19px 10px;
    margin-right: 19px;
}
	.linkleft {
    padding: 7px 15px 10px 27px;
}
	.boutique .linkleft {
    font-size:12px;
    padding: 7px 15px 7px 27px;
    margin-right: 0;
}
	    .hizmat-haj h1, .boutique h1 {
        font-size: 22px;
        margin: 0;
    }
     .bk-label {
        color: #3b4856;
        margin: 0 !important;
    }
    select.bk-phone-code {
    max-width: 120px;
    margin-bottom: 10px;
} 
.bk-phone {
    display: block;  
}
.rc-actions button {
    font-size: 14px;
    padding: 7px 20px;
}
section.mannar-banner  {
    height: 145px;
    width: inherit;
}

section.mannar-banner img {
    height: 100% !important;
    width: auto;
    max-width: inherit;
    margin-right: -130px;
}
}
@media(max-width:400px){
	.BLkTabs input + label, .BLkTabs input:checked + label {
    padding: 7px 15px 6px;
    font-size: 13px;
    margin-left: 15px;
}
}
@media(max-width:340px){
.BoxSlectCat .info2 {
    display: flex;
    flex-wrap: wrap;
}
.BoxSlectCat .TopPage .info2 span { 
    margin-bottom: 20px;
}
	.rmdp-day-picker {
		display: block !important;
}
}




 /* calander  */
/* ==== Date range picker (custom overrides) ==== */

/* Keep the popper above headers/overlays */
.rmdp-container,
.rmdp-wrapper,
.rmdp-portal,
.rmdp-portal .rmdp-wrapper {
  z-index: 9999 !important;
}

/* Force dropdown to open below the input */
.hotels-search .rmdp-wrapper {
  margin-top: 8px; /* small gap under input */
  background-color: #b0b0b0 !important; 
}
 .rmdp-wrapper { 
  font-size: 14px;
}
.rmdp-apply-footer { 
    background: #747474;
}
/* Match your input look without changing width */
.date-input {
  height: 56px;              /* taller */
  line-height: 56px;
  padding: 0 16px;
  border-radius: 10px;
}

/* Range hover preview (between start and end while choosing) */
.rmdp-day.rmdp-hover,
.rmdp-day.rmdp-range-hover {
  background: rgba(0, 102, 255, 0.12) !important;
  border-radius: 8px !important;
}
.rmdp-range {
    background-color: #ffffff00 !important;
    box-shadow: 0 0 3px #8798ad;
    color: #000000 !important;
}

/* Selected start/end days */
.rmdp-day.rmdp-selected span,
.rmdp-day.rmdp-start span,
.rmdp-day.rmdp-end span {
  background: #0066ff !important;
  color: #fff !important;
  border-radius: 8px !important;
}

/* Disabled past days */
.rmdp-day.rmdp-disabled,
.rmdp-day.rmdp-disabled span {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

/* Footer actions */
.rmdp-action-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 10px 12px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.rmdp-button {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  cursor: pointer;
}
.rmdp-button.primary {
  background: #0066ff;
  color: #fff;
  border-color: #0066ff;
}

/* (Optional) make sure containers don't clip the popper */
.hotels-search,
.ContentPageInterne,
.TopPage {
  overflow: visible;
}
 
/* Make "between" days lightly filled */
.day-in-range {
  background: rgba(25, 118, 210, 0.12);
  border-radius: 0 !important;
}

/* Start & End pills */
.day-start,
.day-end {
  background: #1976d2 !important;
  color: #fff !important;
  border-radius: 50% !important;
}

/* Past days disabled look */
.day-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.btn-cal {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}
.btn-cal-apply {
  background: #1976d2;
  color: #fff;
  border-color: #1976d2;
}
.btn-cal:disabled {
  opacity: .5;
  cursor: not-allowed;
}
/* place into your global CSS, e.g. public/css/style.css */
.rmdp-apply-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid #eee;
  background: #747474;
}

.btn-cal {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  font: inherit;
}
.btn-cal-apply {
  background: #ad8c52;
  border-color: #ad8c52;
  color: #fff;
}
.btn-cal:disabled {
  opacity: .5;
  cursor: not-allowed;
}
/* simple calader */
/* الحاوية العامة */
.calendar-container {
  margin-bottom: 20px;
  background: #fff;
  border-radius: 8px;
  padding: 15px;
}

/* خلي التقويم ياخذ العرض كامل */
.rmdp-container {
  width: 100% !important;
}

/* شيل أي ظل/هوامش زائدة من مكوّن التقويم */
.rmdp-calendar {
  width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  direction: rtl; /* RTL */
}

/* ===== رأس الشهر ===== */
.rmdp-header-values {
  font-size: 13px;
  font-weight: 600;
  margin: 6px 0 10px;
  text-align: center;
  color: #333;
}

/* الأسهم – خليهـم طبيعيين في RTL (ما نحتاجش rotate 180) */
.rmdp-arrow-container.rmdp-left,
.rmdp-arrow-container.rmdp-right {
  transform: none !important;
}

/* ===== صف أسماء الأيام (السبت..الجمعة) =====
   نخليه Grid بسبع أعمدة بحيث كل اسم يوم ياخذ 1fr بدون عرض ثابت */
.custom-calendar .rmdp-week {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;                 /* مسافة صغيرة بين العناصر */
  padding: 0 8px;           /* مسافة جانبية بسيطة */
  margin: 6px 0 8px 0;
}

/* اسم اليوم: بدون عرض/ارتفاع ثابتين، نص أصغر ويقص بـ ellipsis إذا ضاق */
.custom-calendar .rmdp-week-day {
  width: auto !important;
  height: auto !important;
  font-size: 9px;
  text-align: center;
  line-height: 1.2;
  color: #000000;
  font-weight: 600;
  text-align: center;
  padding: 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 0;         /* نضمن مافيش دوائر هنا */
  background: transparent;
}

/* لو تحبهم أفتح شوية */
@media (max-width: 480px) {
  .custom-calendar .rmdp-week-day {
    font-size: 11px;
    letter-spacing: .2px;
  }
	    .BoxSlectCat .linkpanier {
        padding: 10px 11px; margin:20px auto 0; 
    }
	.BoxCatinfoLeft.col-sm-4 {
    margin: 0 0;
    min-height: inherit; 
}
}

.rmdp-day {
  width: 34px;
  height: 34px;
}
.rmdp-day span {
  width: 34px;
  height: 34px;
  line-height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.rmdp-today span:not(.rmdp-selected) {
  border: 1px solid #ad8c52;
  color: #ad8c52;
  background: transparent;
}

.rmdp-selected span {
  background: #ad8c52;
  color: #fff;
}

.rmdp-day:not(.rmdp-disabled):hover span {
  background: #eef4ff;
}
/* --------------recap------------------------------------------ */
/* ================== THEME ================== */



/* ================== PAGE / FOOTER SEPARATION ================== */
/* Scope to this page */
.package-recap{
  position: relative;
  z-index: 2;                 /* keep above decorative footer backgrounds */
  padding-bottom: auto;       /* main gap above footer */
  isolation: isolate;         /* new stacking context to avoid overlaps */
}

/* Hard spacer at the very bottom (works even if a parent has overflow) */
.package-recap::after{
  content: "";
  display: block;
  height: 72px;               /* extra safety gap */
}

/* If your footer uses overlay effects, keep it underneath */
footer, .site-footer{ position: relative; z-index: 1; }

/* ================== LAYOUT ================== */
.rc-centerpad{ text-align:center; padding:16px 0; }

.rc-wrap{
  margin:24px 0 48px;         /* local bottom margin (additional gap) */
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:20px;
  align-items:stretch;
}

.rc-photos,.rc-recap{ height:100%; }

/* ================== COLLAGE (COMPACT) ================== */
.rc-collage{
  height:320px;
  min-height:280px;
  display:grid;
  grid-template-columns:2fr 1fr;
  grid-template-rows:1fr 1fr;
  grid-template-areas:"main side1" "main side2";
  gap:10px;
  align-items:stretch;
}
.rc-img{ width:100%; height:100%; object-fit:cover; border-radius:12px; }
.rc-main{ grid-area:main; }
.rc-side1{ grid-area:side1; }
.rc-side2{ grid-area:side2; }

/* ================== RECAP CARD (EQUAL HEIGHT) ================== */
.rc-card{
  height:auto;               /* match collage height */
  min-height:280px;
  background:#fff;
  border-radius: 10px;
  display:flex;
  flex-direction:column;
  box-shadow:0 12px 38px rgba(0,0,0,.06);
  padding:18px;
  border:1px solid #f2f2f2;
  margin-bottom: 30px;
}
 
        .rc-head{display: block;align-items:center;justify-content:space-between;gap: 0;}
        .rc-title{
          margin:0;
          font-size: 20px;
          color: #ad8c52;
          max-width: 65%;
          line-height: 1.5;
        }

 
.rc-priceBadge {
				border-radius: var(--br-6);
				background: url(../image/angle-small-right.png) no-repeat center left;
				background-color: var(--color-burlywood);
				height: 37px;
				font-size: 13px;
				color: #fff !important;
				padding: 6px 20px 6px 30px;
				cursor: pointer;
				position: absolute;
				left: 20px;
				top: 20px;
				}
.rc-priceBadge:hover{background-color:#000}
 

.rc-line{border-top:1px solid #eee;margin: 15px 0;}

.rc-kv{ display:grid; row-gap:6px; font-size:14px; }
.rc-k{ display:grid; grid-template-columns:auto 1fr; gap:8px; }
.rc-k span{ color:#666; }
.rc-k b{font-weight: 600;color: #000000;}

/* ================== HOTELS ================== */
.rc-hotels{ display:grid; row-gap:10px; font-size:14px; }
.rc-hotels-title{
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #394050;
}
.rc-hotel{
  background:#fafafa;
  border:1px solid #eee;
  border-radius:12px;
  padding:10px;
}
.rc-h-city{font-weight:700;margin-bottom: 10px;color: #394050;}
.rc-h-name{ font-weight:600; }

/* ================== ACTIONS ================== */
.rc-actions{
              /* stick buttons to the bottom of the card */
              grid-template-columns:auto 1fr 1fr;  /* edit | cancel | confirm */
              display: flex;
              gap: 10px;
              margin-top: 45px;
}
.rc-btn{}
.rc-edit{
  width:40px; height:auto; padding:0; display:grid; place-items:center;
  border:1px solid var(--theme); background:#fff; color:var(--theme);
}
.rc-cancel{ background:#fff; color:var(--theme); border:1px solid var(--theme); }
.rc-confirm{ background:var(--theme); color:#fff; } 
.rc-confirm:hover{ filter:brightness(.95); }

/* ================== RESPONSIVE ================== */
@media (max-width:991px){
  .rc-wrap{ grid-template-columns:1fr; }
  .rc-collage,.rc-card{min-height:260px;}
  .package-recap{ padding-bottom:88px; } /* still keep gap above footer */
}
@media (max-width:768px){
  .rc-collage{
    height:auto; min-height:0;
    grid-template-columns:1fr;
    grid-template-rows:180px 140px 140px;
    grid-template-areas:"main" "side1" "side2";
  }
  .rc-card{ height:auto; min-height:0; }
  .package-recap{ padding-bottom:80px; }
}
/* ---------- Booking form layout ---------- */
.booking-page { padding: 24px 0 64px; }
.booking-page .container { max-width: 1180px; margin: 0 auto; }

.bk-grid{
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: 24px;
  align-items: start;
}

/* cards */
.bk-card{
  background: #fff;
  border: 1px solid #f2f2f2;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: 26px 20px;
}
.bk-summary{
  position: sticky;
  top: 16px;
}
.bk-summary-card{
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: 16px;
}

/* headings */
.bk-h2{ font-size: 22px; margin: 0 0 12px; }
.bk-h3{font-size: 20px;margin: 40px 0 8px;color: #394050;font-weight: 600;}

/* form */
.bk-form{ display: block; }
.bk-row{display: grid;gap: 12px;grid-template-columns: 1fr;margin-bottom: 12px;}
.bk-row.two{ grid-template-columns: 1fr 1fr; }
.bk-col{display: flex;flex-direction: column;gap: 6px;}
.bk-label{color: #3b4856;margin-bottom: 6px;}

.bk-input, .bk-select select{
  height: 44px;
  border-radius: 8px;
  border: 1px solid #e5e8ef;
  background: #fff;
  padding: 0 12px;
  outline: none;
  font-size: 16px;
  text-align: right;
}
.bk-input:focus, .bk-select select:focus{
  border-color: #ad8c52;
  box-shadow: none;
  outline: none;
}
.bk-select{ position: relative; }
.bk-select select{width: auto;height: 44px;border-radius: 12px;border: 1px solid #e5e8ef;padding: 0 12px 0 30px;background: #fff;font-size: 16px;}

.bk-phone{ display: grid; grid-template-columns: 130px 1fr; gap: 8px; }
.bk-phone-code{
  height: 44px;
  border-radius: 10px;
  border: 1px solid #e5e8ef;
  background: #f8fafc;
  padding: 0 10px;
  font-size: 12px;
}

.bk-check{ display: inline-flex; gap: 10px; align-items: center; font-weight: 600; color:#3b4856; }
.bk-err{ color: #b42318; font-size: 12px; margin-top: 4px; }

/* actions */
.bk-actions{ display: flex; gap: 10px; margin-top: 12px; }
.bk-btn{
  height: 44px; padding: 0 16px; border-radius: 12px;
  font-weight: 700; border: 0; cursor: pointer;
}
.bk-btn.primary{ background: #2563eb; color: #fff; }
.bk-btn.primary:hover{ filter: brightness(.96); }
.bk-btn.ghost{ background: #fff; border: 1px solid #cbd5e1; color:#334155; }
.bk-btn.ghost:hover{ background:#f8fafc; }

/* summary */
.bk-price{
  display: grid; justify-items: end; align-items: end;
  border-bottom: 1px dashed #e5e8ef; padding-bottom: 12px; margin-bottom: 12px;
}
.bk-price-currency{ font-size: 12px; color: #64748b; }
.bk-price-value{ font-size: 28px; font-weight: 800; line-height: 1; }
.bk-price-sub{ font-size: 12px; color:#94a3b8; }

.bk-s-head{display: flex;gap: 20px;align-items:center;margin-bottom: 20px;}
.bk-thumb{ width:64px; height:64px; object-fit:cover; border-radius:10px; }
.bk-s-title{font-weight: 600;color: #394050;}

.bk-s-list{ list-style:none; padding:0; margin:12px 0 0; display:grid; row-gap:10px; }
.bk-s-list li{ display:flex; justify-content:space-between; gap:12px; }
.bk-s-key{ color:#64748b; }
.bk-s-val{ font-weight:600; }

/* responsive */
@media (max-width: 992px){
  .bk-grid{ grid-template-columns: 1fr; }
  .bk-summary{ position: static; }
  .bk-row.two{ grid-template-columns: 1fr; }
}
.package-recap .btn-primary {
  background: #9b7a43;
  color: #fff;
  flex: 1;
  transition: filter .2s;
}
.package-recap .btn-primary:hover { background: #fff;
  color: #9b7a43;}
.package-recap .btn-primary:active {
  background-color: #9b7a43 !important;   /* slightly darker brown */
  filter: none;                 /* override hover filter */
  transform: translateY(1px);   /* subtle press effect (optional) */
  box-shadow: inset 0 2px 6px rgba(0,0,0,.15);
}
/* Make primary button brown in the booking page actions */
.bk-actions .btn-primary{
  background-color: #ad8c52 !important; /* base brown */
  border-color:     #ad8c52 !important;
  color: #fff !important;
  border-radius: 13px;
  transition: background-color .15s ease, box-shadow .15s ease, transform .02s;
}

.bk-actions .btn-primary:hover,
.bk-actions .btn-primary:focus{
  background-color: #9b7a43 !important; /* darker on hover/focus */
  border-color:     #9b7a43 !important;
  color: #fff !important;
  box-shadow: 0 0 0 .25rem rgba(173,140,82,.25) !important; /* brown focus ring */
}

.bk-actions .btn-primary:active{
  background-color: #8c6d3b !important; /* pressed */
  border-color:     #8c6d3b !important;
  box-shadow: none !important;
  transform: translateY(1px);
}

        .package-recap .container { margin-top: 36px; }
        .rc-centerpad { text-align:center; padding:16px 0; }

        /* SWAPPED LAYOUT: Recap LEFT (420px), Form RIGHT (flex) */
        .rc-wrap{
          display:grid;
          grid-template-columns: 420px minmax(0,1fr);
          gap:20px;
          align-items:start;
        }


        /* Recap (LEFT) */
        .rc-card{
          position: sticky;
          top: 92px;
          margin-bottom: 30px;
        }
        .rc-head{}
        .rc-title{
        }
        .rc-priceBadge{
        }
        .rc-line{}

        .rc-kv{ display:grid; row-gap:10px; }
        .rc-k{ display:grid; grid-template-columns: 18px auto 1fr; gap:8px; align-items:center; }
        .rc-k span{ color:#666; }
        .rc-k b{}

        .rc-hotels-title{ 
        }
        .rc-hotel{ padding:12px; border:1px solid #eee; background:#fafafa; border-radius:12px; margin-bottom:10px; }
        .rc-h-city{}
        .rc-h-name{ font-weight:600; font-family: var(--arabic-font); }
 
        .rc-btn, .rc-actions button{
          border-radius: 10px;
          padding: 7px 36px;
          border: 1px solid #ad8c52;
          background: #ad8c52;
          cursor:pointer;
          color: #fff;
          margin-bottom: 15px;
          font-size: 18px;
        }
        .rc-cancel, .rc-btn{background:#000 !important;border-color: #ad8c52;}
        .rc-cancel:hover{background: #fff !important;color: #ad8c52;} 

        /* Form (RIGHT) */
        .bk-card{
        }
        .bk-h2{margin:0 0 12px;font-weight: 700;padding: 0 !important;} 
   
        .bk-phone{ display:grid; grid-template-columns:120px 1fr; gap:10px; } 
        .bk-check{ display:flex; align-items:center; gap:8px; font-weight:600; font-family: var(--arabic-font); }
        .bk-err{ color:#000000; font-size:13px; }

        /* Thumb + name */ 
        .bk-thumb{ width:60px; height:60px; object-fit:cover; border-radius:10px; } 

        .bk-s-list{ list-style:none; padding:0; margin:10px 0 0; display:grid; row-gap:8px; font-family: var(--arabic-font); }
        .bk-s-key{ color:#666; margin-inline-end:6px; }


        @media (max-width: 992px){
          .rc-wrap{display: block;}
			.rc-card {
    position: relative;
    top: 0;
   }
        }

     @media (max-width:576px){ .bk-row.two{ grid-template-columns:1fr; } } 
     @media (max-width:415px){ .rc-title{max-width:100%;text-align: center;} .rc-priceBadge{position:relative;left:0;width: max-content;top: 0;margin: 7px auto;} } 
     
.blkCatalogue a.linkleft, boutique  a.linkleft {
    color: #ad8c52;
}
/* -------------------------------new card direct hajj ---------------------------------------------------------- */
 
/* الكرت الأبيض */
.white-card {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid white;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.white-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.white-info {
  background: #fff !important;
  color: #000 !important;
}
/* ----------------nusuk banner---------------------------------- */
.nusuk-banner {
  position: relative;
  text-align: center;
  margin: 30px 0;
}

.nusuk-banner-img {
  width: 100%;
  display: block;
}

.nusuk-banner-btn {
  position: absolute;
  bottom: 20px;
  left: 20px; 
}

.nusuk-banner-btn .linkpanier {
  background: #b28a52;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}
.nusuk-banner-btn .linkpanier:hover {
  background: #a07a44;
}