@charset "utf-8";
/* overlock */
@font-face {font-family: 'Overlock SC';
  font-style: normal;
  font-weight: 400;
  src: local('Overlock SC'), local('OverlockSC-Regular'), url(https://fonts.gstatic.com/s/overlocksc/v5/cFrEOzZWUct6fhBu_bFdko4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;}
/* raleway */
@font-face {  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v11/0dTEPzkLWceF7z0koJaX1A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;}







/* MOBILE */
@media only screen and (max-width : 767px) 
{
/*menu*/
.navbar { background-color:goldenrod;
		box-shadow: 2px 2px 5px;
		z-index: 999;}
#navcolor li a {color:white;
				font-size: 18px;
				margin-top: 15px;
				font-family: 'Overlock SC';}
#navcolor li a:hover { box-shadow: 2px 2px 5px black;
						background-color: black;}
#navdropdown li a {color:black;}
#navdropdown li a:hover { box-shadow: 2px 2px 5px black;
						background-color: white;}
.logo {width: 100px;
		height: 40px;
		margin-top: -90px;
		margin-bottom: -115px;
		z-index: 999;
		box-shadow: 2px 2px 3px;}
	
	
	
/* FULL BANNER */
#FULLBANNER { margin-top: -80px;
			margin-bottom: 0px;}
.fullbanner { background-image: url(../images/banner2.jpg);
			background-repeat: no-repeat;
			background-size: cover;
			background-attachment: fixed;
			text-align: center;
			height: 350px;
			opacity: 0.7;}
/*.bannerlogo img { position:relative;
			top: -500px;
			width: 200px;
			height: 200px;} */
.bannerlogo h1 { position:absolute;
			top: -230px;
			bottom: 0;
			font-family: 'Raleway';
			font-size: 44px;
			color: gold;
			font-weight: bold;
			text-shadow: 1px 1px black, 2px 2px black, 3px 3px darkslategray;}
	
	
	
/*thought*/
#thought { background-color:goldenrod;
			padding: 5px;
			margin-top: -50px;
			height: 50px;
			z-index: 999;}
#thought p { font-family: 'Raleway';
			color:white;
			font-size: 18px;
			padding: 10px;
			margin-top: -11px;
			z-index: 99999;}
	
	
	
/* slider and programme*/
#SLIDER-TOUR { background: url(../images/program-edited.jpg);
				background-attachment: fixed;
				background-size: cover;
				background-repeat: no-repeat;
				margin-top: 0px;
				padding-top: 50px;
				padding-bottom: 50px;}
#sliderimage  { width: 100%;
				height: 400px;}
#TOURPROGRAM { padding-top: 50px;
				padding-bottom: 100px;}
.carousel-caption {	opacity: 0.8;
					background-color: gray;
					padding: 5px;}
.Banner h1 { font-size: 22px; }
.programheader h3 { font-family: 'Poiret One', cursive;
					font-weight: bold;
					color:goldenrod;
					font-size: 30px;
					margin-top: 20px;}
.tourtable tr {background-color: gold;
				color:black;}
.tourtable td {background-color: goldenrod;
				color:black;}
.tabledata { width: 100%;
				height: 300px;}
.programeimage img { width: 100%;
				height: 295px;
				margin-top: 38px;
				box-shadow: 2px 2px 5px;}
.about h4 { font-family: Raleway;
		margin-top: 60px;
		font-size: 17px;}
	
	
	
/*Group of companies*/
#COMPGROUP { background:url(../images/compbg.jpg);
			background-attachment: fixed;
			background-repeat: no-repeat;
			background-size: cover;
			margin-top: 10px;
			padding-top: 70px;
			padding-bottom: 100px;}
.comphead h1 { font-family: Raleway;
				font-size: 40px;
				text-shadow: 1px 1px 1px;}
.compgroup .thumbnail { padding: 40px;
						height: 350px;}
.thumbnail img {height: 100px;
				width: 100px;}
.compgroupone h4 { font-family: Overlock SC;
					font-size: 30px;}
.compgrouptwo h4 { font-family: Overlock SC;
					font-size: 30px;}
.compgroupthree h4 { font-family: Overlock SC;
					font-size: 30px;}
	
	
	
/*services*/
.transition { -webkit-transition: all .3s;
			  -moz-transition: all .3s;
			  -o-transition: all .3s;
			  transition: all .3s; }
.img-responsive { width: 100%;
					height: 300px;}
.basic-widgets { padding-top: 15px;
  				padding-bottom: 15px; }
.project-hover { position: relative;
  				overflow: hidden; }
.project-hover:hover .text-view { top: 55%;
  								opacity: 1; }
.project-hover:hover img { opacity:0.2;}
.project-hover .text-view { width: 95%;
						  position: absolute;
						  top: 35%;
						  left: 50%;
						  -webkit-transform: translate(-50%, -50%);
						  -ms-transform: translate(-50%, -50%);
						  transform: translate(-50%, -50%);
						  opacity: 0;
						  font-weight: 600; }
#TOURINFO { margin-top: 0px;
			padding-top: 30px;
			padding-bottom: 30px;
			background-image: url(../images/hotelbackground.jpg);
			background-attachment: fixed;
			background-repeat: no-repeat;
			background-size: cover;
			box-shadow: 0 0 210px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);}
#TOURINFO h1 { 	font-family: 'Raleway';
				font-size: 44px;
				margin-top: 50px;
				color: black;
				font-weight: bold;}
.makmadhotel { background-color: gold;
  				box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
				margin:48px;}
.makhead { color:black;
			font-size: 30px;
			font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";}
.makkah h3 { color:black;
			font-size: 14px;
			font-family: Raleway;
			margin-top: 0px;}
.makkah h4 { color:black;
			font-size: 16px;
			font-family: Raleway;}
.madhead { color:black;
			font-size: 30px;
			font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";}
.madinah h3 { color:black;
			font-size: 20px;
			font-family: Raleway;
			margin-top: -50px;}
.madinah h4 { color:black;
			font-size: 15px;
			font-family: Raleway;}
.tourdetail { margin-top: -20px;
			margin-bottom: 100px;}
.packhead h3 { font-family: Overlock SC;
				font-size: 30px;
				color: black;}
.packhead {font-family: Raleway;
			font-size: 16px;
			color: black;
			margin-top: 100px;}
	
	
	
/*Weather*/
#WEATHER { padding-top: 100px;
			padding-bottom: 100px;
			background: url(../images/banner.jpg);
			background-size: cover;
			background-repeat: no-repeat;
			background-attachment: fixed;}
.weatherwidget img { width: 100%;}
	
	
		
/*Gallery*/
#Gallery { margin-top: 50px;
			margin-bottom: 50px;}
#Gallery h2 { font-family: Roboto;
			font-weight: bold;
			margin-bottom: 50px;
			font-size: 44px;
			color: goldenrod;}
.galleryimg { -webkit-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);
    margin-bottom:20px; }
	
	
	
/*footer*/
#FOOTER { background-color: goldenrod;
		height: auto;}
.footerlogo img { width: 200px;
				height: 150px;
				margin-top: 20px;}
	

	
	
	
}






/* TABLET */
@media only screen and (min-width : 768px) and (max-width : 1199px)  
{
/*menu*/
.navbar { height: 80px;
			background-color:goldenrod;
			box-shadow: 2px 2px 5px;}
#navcolor li a {color:white;
				font-size: 18px;
				margin-top: 15px;
				font-family: 'Overlock SC';}
#navcolor li a:hover { box-shadow: 2px 2px 5px black;
						background-color: black;}
#navdropdown li a {color:black;}
#navdropdown li a:hover { box-shadow: 2px 2px 5px black;
						background-color: white;}
.logo {width: 120px;
		height: 65px;
		margin-top: -60px;
		margin-bottom: -115px;
		z-index: 999;
		box-shadow: 2px 2px 3px;}
	
	
	
/* FULL BANNER */
#FULLBANNER { margin-top: -20px;
			margin-bottom: 0px;}
.fullbanner { background-image: url(../images/banner2.jpg);
			background-repeat: no-repeat;
			background-size: cover;
			background-attachment: fixed;
			height: 650px;
			min-height: 580px}
/*.bannerlogo img { position:relative;
			top: -500px;
			width: 200px;
			height: 200px;} */
.bannerlogo h1 { position:absolute;
			top: -500px;
			bottom: 0;
			font-family: 'Raleway';
			font-size: 60px;
			color: gold;
			font-weight: bold;
			text-shadow: 1px 1px black, 2px 2px black, 3px 3px darkslategray;}
	
	
	
/*thought*/
#thought { background-color:goldenrod;
			padding: 5px;
			margin-top: -150px;
			height: 50px;
			z-index: 999;}
#thought p { font-family: 'Raleway';
			color:white;
			font-size: 18px;
			padding: 10px;
			margin-top: -11px;
			z-index: 99999;}
	
	
	
/* slider and about*/
#SLIDER-TOUR { background: url(../images/program-edited.jpg);
				background-attachment: fixed;
				background-size: cover;
				background-repeat: no-repeat;
				margin-top: 80px;
				padding-top: 50px;
				padding-bottom: 30px;}
#sliderimage  { width: 100%;
				height: 400px;}
.carousel-caption {	opacity: 0.8;
					background-color: gray;
					padding: 5px;}
.Banner h1 {font-size: 24px;}
#TOURPROGRAM { padding-top: 50px;
			padding-bottom: 100px;}
.programheader h3 { font-family: 'Poiret One', cursive;
					font-weight: bold;
					color:goldenrod;
					font-size: 30px;
					margin-top: 20px;}
.tourtable tr {background-color: gold;
				color:black;}
.tourtable td {background-color: goldenrod;
				color:black;}
.tabledata { width: 100%;
				height: 300px;}
.programeimage img { width: 100%;
				height: 295px;
				margin-top: 38px;
				box-shadow: 2px 2px 5px;}
.about h4 { font-family: Raleway;
		margin-top: 60px;
		font-size: 17px;}
	
	
	
/*Group of companies*/
#COMPGROUP { background:url(../images/compbg.jpg);
			background-attachment: fixed;
			background-repeat: no-repeat;
			background-size: cover;
			margin-top: 10px;
			padding-top: 70px;
			padding-bottom: 100px;}
.comphead h1 { font-family: Raleway;
				font-size: 40px;
				text-shadow: 1px 1px 1px;}
.compgroup .thumbnail { padding: 40px;
						height: 350px;}
.thumbnail img {height: 100px;}
.compgroupone h4 { font-family: Overlock SC;
					font-size: 30px;}
.compgrouptwo h4 { font-family: Overlock SC;
					font-size: 30px;}
.compgroupthree h4 { font-family: Overlock SC;
					font-size: 30px;}
	
	
	
/*services*/
.transition { -webkit-transition: all .3s;
			  -moz-transition: all .3s;
			  -o-transition: all .3s;
			  transition: all .3s; }
.img-responsive { width: 100%;
					height: 300px;}
.basic-widgets { padding-top: 15px;
  				padding-bottom: 15px; }
.project-hover { position: relative;
  				overflow: hidden; }
.project-hover:hover .text-view { top: 55%;
  								opacity: 1; }
.project-hover:hover img { opacity:0.2;}
.project-hover .text-view { width: 95%;
						  position: absolute;
						  top: 35%;
						  left: 50%;
						  -webkit-transform: translate(-50%, -50%);
						  -ms-transform: translate(-50%, -50%);
						  transform: translate(-50%, -50%);
						  opacity: 0;
						  font-weight: 600; }
#TOURINFO { margin-top: 0px;
			padding-top: 30px;
			padding-bottom: 30px;
			background-image: url(../images/hotelbackground.jpg);
			background-attachment: fixed;
			background-repeat: no-repeat;
			background-size: cover;
			box-shadow: 0 0 210px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);}
#TOURINFO h1 { 	font-family: 'Raleway';
				font-size: 44px;
				margin-top: 50px;
				color: black;
				font-weight: bold;}
.makmadhotel { background-color: gold;
  				box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
				margin:40px;}
.makhead { color:black;
			font-size: 30px;
			font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";}
.makkah h3 { color:black;
			font-size: 16px;
			font-family: Raleway;
			margin-top: 20px;}
.makkah h4 { color:black;
			font-size: 16px;
			font-family: Raleway;}
.madhead { color:black;
			font-size: 30px;
			font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";}
.madinah h3 { color:black;
			font-size: 16px;
			font-family: Raleway;
			margin-top: -50px;}
.madinah h4 { color:black;
			font-size: 15px;
			font-family: Raleway;}
.tourdetail { margin-top: -20px;
			margin-bottom: 100px;}
.packhead h3 { font-family: Overlock SC;
				font-size: 30px;
				color: black;}
.packhead {font-family: Raleway;
			font-size: 16px;
			color: black;
			margin-top: 100px;}
	
	
	
/*Weather*/
#WEATHER { padding-top: 100px;
			padding-bottom: 100px;
			background: url(../images/banner.jpg);
			background-size: cover;
			background-repeat: no-repeat;
			background-attachment: fixed;}
	
	
	
/*Gallery*/
#Gallery { margin-top: 50px;
			margin-bottom: 50px;}
#Gallery h2 { font-family: Roboto;
			font-weight: bold;
			margin-bottom: 50px;
			font-size: 44px;
			color: goldenrod;}
.galleryimg { filter: gray; /* IE6-9 */
  	-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
    -webkit-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);
    margin-bottom:20px; }
.galleryimg:hover { filter: none; /* IE6-9 */
  			-webkit-filter: grayscale(0); /* Google Chrome, Safari 6+ & Opera 15+ */  }


	
/*footer*/
#FOOTER { background-color: goldenrod;
		height: auto;
		padding-top: 20px;
		padding-bottom: 20px;}
.footerlogo img { width: 200px;
				height: 150px;
				margin-top: 20px;
				box-shadow: 2px 2px 3px;}

	
	
	
}






/* DESKTOP */
@media only screen and (min-width : 1200px)
{
/*menu*/
.navbar { height: 80px;
			background-color:goldenrod;
			z-index: 1;
			box-shadow: 2px 2px 5px;}
#navcolor li a {color:white;
				font-size: 18px;
				margin-top: 15px;
				font-family: 'Overlock SC';}
#navcolor li a:hover { box-shadow: 2px 2px 5px black;
						background-color: black;}
#navdropdown li a {color:black;}
#navdropdown li a:hover { box-shadow: 2px 2px 5px black;
						background-color: white;}
.logo {width: 130px;
		height: 70px;
		margin-top: -60px;
		margin-bottom: -115px;
		z-index: 999;
		box-shadow: 2px 2px 3px;}
	
	
	
/* FULL BANNER */
#FULLBANNER { margin-top: -80px;
			margin-bottom: 0px;}
.fullbanner { background-image: url(../images/banner2.jpg);
			background-repeat: no-repeat;
			background-size: cover;
			background-attachment: fixed;
			height: 700px;
			min-height: 580px}
/*.bannerlogo img { position:relative;
			top: -500px;
			width: 200px;
			height: 200px;} */
.bannerlogo h1 { position:absolute;
			top: -500px;
			bottom: 0;
			font-family: 'Raleway';
			font-size: 80px;
			color: gold;
			font-weight: bold;
			text-shadow: 1px 1px black, 2px 2px black, 3px 3px darkslategray;}

	
	
/*thought*/
#thought { background-color:transparent;
			padding: 5px;
			margin-top: -150px;
			height: 50px;
			z-index: 999;}
#thought p { font-family: 'Raleway';
			color:white;
			font-size: 18px;
			padding: 10px;
			margin-top: -11px;
			z-index: 99999;}
	
	
	
/* slider and about*/
#SLIDER-TOUR { 	margin-top: 80px;
				padding-top: 50px;
				padding-bottom: 30px;}
#sliderimage  { width: 100%;
				height: 400px;}
#TOURPROGRAM { padding-top: 50px;
				padding-bottom: 100px;}
.carousel-caption h1 { font-size: 24px;}
.carousel-caption {	opacity: 0.8;
					background-color: gray;
					padding: 5px;}
.programheader h3 { font-family: 'Poiret One', cursive;
					font-weight: bold;
					color:goldenrod;
					font-size: 34px;
					margin-top: 20px;}
.tourtable tr {background-color: gold;
				color:black;}
.tourtable td {background-color: goldenrod;
				color:black;}
.tabledata { width: 100%;
				height: 300px;}
.programeimage img { width: 100%;
				height: 295px;
				margin-top: 38px;
				box-shadow: 2px 2px 5px;}
.about h4 { font-family: Raleway;
		padding-left: 45px;
		padding-right: 45px;
		margin-top: 60px;}
	
	
	
/*Group of companies*/
#COMPGROUP { background:url(../images/compbg.jpg);
			background-attachment: fixed;
			background-repeat: no-repeat;
			background-size: cover;
			margin-top: 10px;
			padding-top: 70px;
			padding-bottom: 100px;}
.comphead h1 { font-family: Raleway;
				font-size: 40px;
				text-shadow: 1px 1px 1px;}
.compgroup .thumbnail { padding: 40px;
						height: 330px;}
.thumbnail img {height: 180px;}
.compgroupone h4 { font-family: Overlock SC;
					font-size: 30px;}
.compgrouptwo h4 { font-family: Overlock SC;
					font-size: 30px;}
.compgroupthree h4 { font-family: Overlock SC;
					font-size: 30px;}
	
	
	
/*services*/
.transition { -webkit-transition: all .3s;
			  -moz-transition: all .3s;
			  -o-transition: all .3s;
			  transition: all .3s; }
.img-responsive { width: 100%;
					height: 300px;}
.basic-widgets { padding-top: 15px;
  				padding-bottom: 15px; }
.project-hover { position: relative;
  				overflow: hidden; }
.project-hover:hover .text-view { top: 55%;
  								opacity: 1; }
.project-hover:hover img { opacity:0.2;}
.project-hover .text-view { width: 95%;
						  position: absolute;
						  top: 35%;
						  left: 50%;
						  -webkit-transform: translate(-50%, -50%);
						  -ms-transform: translate(-50%, -50%);
						  transform: translate(-50%, -50%);
						  opacity: 0;
						  font-weight: 600; }
#TOURINFO { margin-top: 0px;
			padding-top: 30px;
			padding-bottom: 30px;
			background-image: url(../images/hotelbackground.jpg);
			background-attachment: fixed;
			background-repeat: no-repeat;
			background-size: cover;
			box-shadow: 0 0 210px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);}
#TOURINFO h1 { 	font-family: 'Raleway';
				font-size: 44px;
				margin-top: 50px;
				color: black;
				font-weight: bold;}
.makmadhotel { background-color: gold;
  				box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
				
				margin:48px;}
.makhead { color:black;
			font-size: 30px;
			font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";}
.makkah h3 { color:black;
			font-size: 18px;
			font-family: Raleway;
			margin-top: 0px;}
.makkah h4 { color:black;
			font-size: 16px;
			font-family: Raleway;}
.madhead { color:black;
			font-size: 30px;
			font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";}
.madinah h3 { color:black;
			font-size: 20px;
			font-family: Raleway;
			margin-top: -50px;}
.madinah h4 { color:black;
			font-size: 15px;
			font-family: Raleway;}
.tourdetail { margin-top: -20px;
			margin-bottom: 100px;}
.packhead h3 { font-family: Overlock SC;
				font-size: 30px;
				color: black;}
.packhead {font-family: Raleway;
			font-size: 16px;
			color: black;
			margin-top: 100px;}
	
	
	
/*Weather*/
#WEATHER { padding-top: 100px;
			padding-bottom: 100px;
			background: url(../images/banner.jpg);
			background-size: cover;
			background-repeat: no-repeat;
			background-attachment: fixed;}
	
	
	
/*Gallery*/
#Gallery { margin-top: 50px;
			margin-bottom: 50px;}
#Gallery h2 { font-family: Roboto;
			font-weight: bold;
			margin-bottom: 50px;
			font-size: 44px;
			color: goldenrod;}
.galleryimg { filter: gray; /* IE6-9 */
  	-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
    -webkit-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);
    margin-bottom:20px; }
.galleryimg:hover { filter: none; /* IE6-9 */
  			-webkit-filter: grayscale(0); /* Google Chrome, Safari 6+ & Opera 15+ */  }
	
		
	
/*footer*/
#FOOTER { background-color: goldenrod;
		height: auto;
		margin-top: 0px;
		box-shadow: 2px 2px 10px;}
.footerlogo img { width: 200px;
				height: 150px;
				margin-top: 20px;
				box-shadow: 2px 2px 5px;}
	
	
	
	





	
	
	
}