@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap');
/*  ==================CONSTUMED CLASSES ====================== */
 .orange {
	 color : #ff6643;
	 text-decoration : underline;
	 text-decoration-style : white;
	 font-weight : 700;
 }
 .headings {
	display :flex;
	 flex-direction :column;
	padding-top :  25px;
	font-weight : 700;
	font-family : assistant;
	letter-spacing : 1px;
	font-style : italic;
	text-align :center;
	font-size : 120%;
 }
.svg-icon img {
	height : 130px;
 }
 .make-maroon {
	 color : #FFB687;
	 font-weight : 700;
	 text-shadow : 1px 3px 0px black;
 }
 .material-icons {
	font-size : 80px;
	color : #FFB687;
	text-align :center;
}
.customized-modal {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #ff6643d9;
    min-height: 100vh;
    display: none;
    justify-content: center;
    align-items: center;
	border : none;
}
.customized-modal article {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 700px;
	text-align: center;
	
}
.customized-modal .modal-content-comz {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
	color : white;
	background-color: #000000e3;
	border-top : 3px salmon solid ;
	border-bottom : 3px salmon solid ;
	padding-top: 2%;
	width : 100%;
} #who-we-are span { font-size : 62px; color :#f76982; text-shadow : 1px 1px 1px black; }
.customized-modal .modal-content-comz div {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	justify-content: space-evenly;
}
.customized-modal figure {
    height: 10vh;
    width: 100%;
    color: white;
    text-align: center;
    border: none;
    font-weight: 800;
    font-size: 38px;
    justify-content: center;
    align-items: center;
    height: 8vh;
    margin: 10px;
    padding: 0px;
    background-color: #f96645;
	transition: all 0.5s ease-in-out;
}
.customized-modal figure p {
	margin: auto;
	transition: all 0.5s ease-in-out;
}
.customized-modal .modal-header {
    border-radius: 12px 12px 0px 0px;
    box-shadow: 3px -2px 3px black;
}
.customized-modal .modal-footer {
	border-radius: 0px 0px 12px 12px  ;
	box-shadow: 3px 3px 3px black;
}
.customized-modal h3 {
    margin: 10px auto 30px auto;
    font-size: 38px;
    width: 100%;
    font-weight: 900;
    font-family: serif;
    font-style: italic;
    text-shadow: 1px 3px 0px #f96645;
    color: #f3c1c1;
}

/*  ==================BASICS ====================== */
 header {
	background-color :black;
	color :white;
	border-bottom : 15px solid black;
	position :relative;
 }
 header .contacts {
	display :flex;
	color :red;
	width: 100%!important;
	padding: 5px!important;
 }
 .contHOld {
	 display :flex;
	 width : 650px ;
	 text-align :center;
	 color : #FFB687;
	 justify-content :space-around;
 }
 main {
	 padding : 0px;
	 margin : 0px ;
	 box-sizing : border-box;
	 position: relative;
 }
 .socialie-icon {
	 height : 100%;
	 padding-bottom : 10px;
	 margin : 5px;
	 position : absolute;
	 right : 20px;
 }
.socialie-icon img {
	 width : 30px;
	 height : 30px;
	 margin-right : 3px;
	 border : 1px solid red;
	 cursor : pointer;
 }
  a:hover {
	 background-color :black !important;
	 color :white !important;
	 border-radius : 8px ;
	transition : 0.6s;

 }
 #article-hero a:hover {
    background-color: transparent !important;
}
.navbar {
	background-color : #FFB687!important ;
	min-height : 12.7vh;
 }
 .slide-Item3 h2 , .slide-Item2 h2 {
	font-size : 45px;
	font-weight : 780;
	letter-spacing : 1.5px;
	margin-bottom : 20px;
 }
 .navbar-toggler-icon {
	background-color : #d6c2c2 !important;
	margin :2px !important;
 }
 .navbar-toggler {
	  margin-bottom : 5px !important;
 }
  form button {
	border:2px solid black !important;
	color :black !important;
	font-weight : 700 !important;
  }
 form button:hover {
	background-color :black !important;
	color :red !important;
	border-radius : 8px ;
	transition : 0.6s;
	border : none;
 }
.navbar ul {
	margin : 0px auto;
}

.navbar ul li a {
	color : black !important ;
	text-align : center;
	color :white !important;
	font-weight : 700;
	height : 55px;
	line-height : 33px;
	width : 200px;
 }

.at-page {
	 background-color :black !important;
	 color :red !important;
	 border-radius : 8px ;
	 transition :5s;
 }
.openn {
	background-color : black;
	width : 50px;
	height : 50px;
	border : 2px solid red!important;
	display :flex;
}
.openn-icon {
	background-color :#fffe00 ;
	margin :auto;
}
 .activeH  {
	 background-color :black !important;
	 color :red !important;
	 border-radius : 8px ;
	transition : 0.6s;
	margin : 2px;
}
.contact-icon {
	width : 75px;
	height : 75px;
	margin : 0px auto;
}
.navbar-brand img {
	background-color : black;
	width : 80px;
	height : 80px;
	margin-left : 20px;
	border : 3px solid #FFB687;
}
.carousel-control-next, .carousel-control-prev {
	width:100px !important;
	height:80px !important;
	background-color : red;
	top : 50%;
	transform : translateY(-50%)
}

#hamburger {
	width : 70px;
	height : 53px;
	border : 5px solid #945037;
	align-items :center;
	padding : 2%;
	justify-content : space-around;
	background-color :black;
	transition : all 0.5s ease;
	overflow : hidden;
}
#hamburger .lines {
	width : 44px;
	background-color :#ff7e74;
	height : 8px;
  margin : 5px;
	transition : all 0.5s ease;
}
#hamburger:hover {
	border : 5px solid white ;
}
.style1 {
    transform: translate(1px,11px) rotate(33deg);
}
.style2 {
	transform : translateX(5000%);
}
.style3 {
    transform: translate(0px,-1px) rotate(-33deg);
}
/* ============================= COLOURS ================================== */
.priCol {
	color : #FFB687;
}
.secCol {

}
.terCol {

}

 /*============================= SILDING SECTION / CAROUSEL --------- */

#carouselControls .carousel-inner {

	height :80vh !important;
	border-bottom : 20px solid black;

}
 slide-Item1 {
	 background-size : cover;
	 height : 100% ;
	 background-position : center center;
 }
  .slide-Item2 {
	 background-size : cover;
	 height : 100% ;
	 background-position : center center;
 }
  .slide-Item3 {
	 background-size : cover;
	 height : 100% ;
	 background-position : center center;
 }
.middle {
	margin : 20px 0px !important;
	margin-bottom : 15px;
}
article .middle p {
	margin-top : 25px;
	font-size : 23px;
}
section {
	width : 100%;
}
 /* ================== SECTIONS BY IDs ========================== */
#carousel {
	width : 100%;
	height : 80vh;
	display : flex;
	border-bottom : 5px solid #FFB687;
	background : url("../images/home-cover.jpg") no-repeat;
	background-position : center center;
	background-size : cover;
	background-color: rgb(0 0 0 / 42%);
	background-blend-mode : multiply;
}
.caro-div{
	color :white;
	text-align : center;
	font-weight : 800;

}
#contact-first {
	background-color : grey;
}

#contact-first h2 {
	text-align :center;
}
#process {
	min-height : 70vh;
	width : 100%;
	background-color : black;
	color : white;
}
footer {
	background-color : #a9949421;
}
footer .article , footer aside {
	margin : 10px auto;
	height : 35vh;
	display :flex;
	justify-content : center ;
	align-items :center;
}
footer .article {
	display :felx;
	flex-direction :column;
}
footer aside img {
	height : 75%;
}
footer figure {
	background-color :black;
	display :flex;
	justify-content : space-around;
	align-items :center ;
	height : 10vh;
	text-align :center;
	padding-top : 10px;
	color  : white;
}
footer .wrapper {
	padding : 4% 20px;
	margin-bottom : 30px !important;
}
.move-up-icon {
    background-color: black;
    border-radius: 50%;
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: none;
    cursor: pointer;
    opacity: 0.7;
}
.move-up-icon img {
    height: 50px;
    width: 50px;
    transition: all 0.4s ease-in-out;
    transform: rotate(180deg);
    border-radius: 50%;
    opacity: 0.7;
}
.move-up-icon img:hover {
	transform : rotate(0deg);
	opacity : 1;
}
#why-choose-us  {
	padding-bottom : 5%;
}

#news {
	min-height : 70vh;
}
#form {
	width : 100%;
	height : 100vh;
	display :flex;
	background : url("../tile.png") repeat;
}
#herotag {
  width : 100%;
  height: 90vh;
  background: url('../images/gallery/faqs.jpg') no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  color : #FFB687;
  filter: brightness(1.6);
  border-bottom: 20px solid black;
}
#question-pic {
  background-color: grey;
  display : none;
}
#begin {
  min-height: 50vh;
  width: 100%;
  flex-direction: column;
  background-color: #80808029;
  text-align: center;
  padding: 5% 3% 3% 3%;
  display: flex;
}
/* ===============  SUB CONTAINERS   ======================== */
#carousel aside , #carousel article {
	width : 50%;
}
#carousel .caro-inner {
	min-height : 38vh;
	margin-left : 10px;
	display : flex;
	justify-content : space-evenly;
	flex-direction : column;
	color : white;
	font-weight : 700;
	font-style : italic;
}

#why-choose-us .centerfy {
	flex-direction : column;
	padding : 2% 0px;
	transition : all 0.6s ease-in-out;
}
#news div{
	margin : 0px auto;
}
#news article div ,#news aside div {
	display :flex;
	width :100%;
}

#news .figure {
	height : 300px;
}
#news aside {
	padding-left  : 15px;
}
#news .content {
	display :flex;
	flex-direction :column;
}
#news #begin {
  background: url("../images/gallery/questions.jpg") repeat;
}
#firstfige {
	background : url("../images/gallery/welcome.jpg") no-repeat;
	background-size : cover;
	background-position : center center;
}

#other {
	background : url("../images/gallery/questions.jpg") no-repeat;
	background-size : cover;
	background-position : center center;
  box-shadow: 8px 7px 8px black;
}
#secondfigre{
	background : url("../images/gallery/socialnews.jpg") no-repeat;
	background-size : cover;
	background-position : center center;
}
#form .form-container {
	width : 650px;
	margin : auto;
	padding : 2% 5%;
	border : 18px solid #e64a19ad;
	background-color : white;
	box-shadow : -8px 22px 8px black;
}
#form .form-container label {
	font-weight : 700;
	text-transform : uppercase;
	font-size : 22px;
}
#news .another {
	flex-direction: column;
}
#news .hid-cotent {
	display : none ;
}
#herotag article {
    width: 100%;
    margin: auto;
    max-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 2%;
}
#begin article {
    margin: 30px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 20px auto;
}
#begin aside {
	flex-direction: column;
}
/* ===============  IMAGES    ======================== */
footer .socialie-icon{
	transform : rotate(-7deg) translateX(130px);
}
#footer-icon-slide img {
	height : 220px!important;
}
#herotag img {
  width : 60px;
  height: 60px;
  border-radius: 12px;
}
/* ===============  spans    ======================== */

#footer-icon-slide .carousel-item span {
	color : #ffffff47;
	cursor : all-scroll;
}

/* ===============  headings and paragraphs ======================== */
p {
	font-size : 18px;
}
#services h1 {
	color : #AA4200 !important;
}
.three h3 {
	color :#FFB687;
	font-style : italic;
	font-weight : 600;
	text-shadow : 1px 2px 1px black;
}
.three p ,
#news .content p{
	font-style : italic;
	font-size : 21px;
}

#carousel h1 span{
	color :#FFB687;
}
.caro-div h1 {
    font-size: 62px;
    text-shadow: 3px 3px 1px #ffb687;
    font-weight: 700;
    font-style: italic;
}
.caro-div h3 {
    font-size: 42px;
    font-family: 'Assistant';
    font-weight: 700;
    font-style: oblique;
}
#why-choose-us p{
	padding : 1%;
}
#why-choose-us h2 {
    text-align: center;
    padding: 25px;
    margin: 25px;
    font-style: italic;
    color: #ffb687;
    text-shadow: 1px 3px 0px black;
    font-size: 43px;
    font-family: 'Assistant';
    font-weight: 900;
}
#process h2{
	text-align : center;
	margin : 20px;
	padding : 20px;
	font-style : italic;
}
#news h1 {
	text-align :center;
	color :#FFB687;
	font-style : italic;
	margin : 30px;
	font-size : 62px;
	text-shadow : 2px 3px 2px black;
	text-decoration : underline;
}
#news h2 {
	font-style : italic;
	text-shadow : 2px 3px 0px #FFB687;
	text-align :center;
	font-size : 2.6rem;
	margin : 35px auto;
}
#news .content h4 {
	font-family : 'Assistant';
	font-style : italic;
	font-size : 26px;
	font-weight : 800;
	color : #FFB687;
	text-shadow : 1px 1px 0px black;
}
.process-num {
	text-shadow : 1px 3px 0px #FFB687;
	font-size : 3rem;
}

#process figure h4 {
    text-shadow: 1px 1px 0px #ffb687;
	font-size : 1.7rem;
}
footer .wrapper h3 {
	font-size :42px;
	transform : rotate(-7deg);
	margin-bottom : 8px;
}
footer .wrapper p {
  font-family: Apple Color emoji;
  font-weight: 300;
  font-size: 23px;
  font-style: italic;
  transform: rotate(-7deg);
}
fotter figure p {
	text-align :center !important;
}
#herotag h1 {
  font-size: 150px;
  font-style: italic;
  width: 405px;
  background-color: #00000082;
  font-family: Apple Color emoji;
  text-decoration: underline;
}
#begin h4 {
  font-size: 62px;
  font-style: italic;
  color: #FFB687;
  text-align: center;
  margin-bottom: 27px;
}
/* ===============  BUTTONS  AND ANCHORESS  ======================== */
.caro-inner a {
	color : #FFB687;
	animation : underline 2s ease infinite;
}
.button , button{
	width : 210px;
	height : 48px;
	transition : all 0.6s ease-in-out;
}
#news .content .btn {
	font-size : 32px;
	color :white;
	background-color : black;
	margin-right : 30px;
	font-weight : 710;
	transition : all 0.4s ease-in;
	cursor : pointer;
}
.caro-inner .button{
	background-color :#FFB687;
	color : black;
	transform : skew(-3deg);
}
#why-choose-us button {
	outline : none;
	margin : 10px;
	background-color : black;
	color : white;
}
.contHOld a {
	color : white;
	font-weight : 700;
}
#begin button {
  font-weight: 700;
  font-family: sans-serif;
}
#begin a .btn-1{
  background-color: #e77450db;
  color :white;
}
#begin a .btn-2{
  background-color: black;
  color :white;
}
#herotag a {
  color : white;
  background-color: black;
  font-size: 28px;
}
/* ===============  BUTTONS STATES   ======================== */
button:hover, .button:hover {
	letter-spacing : 2px;
	font-weight : 700;
	text-decoration : underline;
}
#why-choose-us button:hover ,
.button:hover {
	background-color :#FFB687;
	color : black;
	border-bottom : 5px dotted black;
}
#footer-icon-slide:hover {
	background-color : black;
}
#news .content .btn:hover {
	font-size : 32px;
	color :black;
	background-color : #FFB687;
}

.form-control:focus {
    border-color:#FFB687 !important;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(255,182,135,1)!important;
}

 /* =========================phone scalling ============ */
@media (max-width: 992px){
	.navbar-brand img {
		transform : translateY(-13px) !important;
	}
	.navbar-light .navbar-toggler {
		transform :translateY(-10px) !important;
	}
	.navbar-light .navbar-toggler {
		width : 92px;
		height : 60px;
		display :flex !important;
		justify-content :center !important;
		align-items :center !important;
	}
	.navbar-light .navbar-nav .nav-link {
		width : 100% !important;
	}
	#hero h1,#hero h2 ,#hero h3{
		font-size : 330% !important;
	}
}

@media (max-width: 872px){
	.navbar-light .navbar-toggler {
		transform: translate(10px, -11px)!important;
	}
	.navbar-brand img {
		transform : translateY(-6px) !important;
	}
	#hero h1,#hero h2 ,#hero h3{
		font-size : 280% !important;
	}

}
@media (max-width: 762px){
	.navbar {
		min-height : 15vh !important;
	}
	.navbar-light .navbar-toggler {
		transform: translate(10px, -11px)!important;
	}
	.slide-Item3 h2 , .slide-Item2 h2 {
		 text-align :center;
	}
	.navbar-light .navbar-toggler {
		transform :translateY(-2px) !important;
	}
	#hero h1,#hero h2 ,#hero h3{
		font-size : 230% !important;
	}
}

@media(max-width: 682px){

	header  .contacts {
		justify-content :center;
		flex-direction :column;
		align-items :center;
	}
	header .contHOld {
		flex-direction : column;
		width :250px;
		display : none;
	}
	header .contHOld .p{
		display : none;
	}
	.socialie-icon {
		height: 100%;
		padding-bottom: 10px;
		margin: 5px;
		position: initial;
		right: auto;
	}
	#news article div ,#news aside div {
		flex-direction: column;
	}
	#news .figure ,#news .content {
		width :100%;
	}
	#carousel .caro-div h2, #carousel .caro-div h1 {
		font-size : 20%;
	}
	#technology h3{
		font-size : 26px;
	}
	#technology h4{
		font-size : 20px;
		text-decoration : underline;
	}
	#hero h1,#hero h2 ,#hero h3{
		font-size : 230% !important;
	}
}


@media(max-width: 558px){
	#hero h1,#hero h2 ,#hero h3{
		font-size : 190% !important;
	}
	section {
		text-align : center;
	}
}
@media(max-width :465px){
	#hero aside h3 a{
		display : block !important;
	}
	#hero h1,#hero h2 ,#hero h3{
		font-size : 160% !important;
	}
	#ser-hero .centerfy h1 {
		font-size: 193%;
	}
	#packages article h2 span {
		display :block !important;
	}
}

 /* =========================JAVASCRIPT APPENDED CLASSES ============ */
.sticky {
	position : sticky !important;
	z-index : 400;
	top : 0px !important;
	left : 0px !important;
	box-shadow : 3px 8px 8px black;
	animation : fadeDown 1.5s ease-in ;
}

.active-img {
	transform : scale(0.5);
	border : 2px solid red;
}

.carous-span-js {
	color : white !important ;
	font-weight : 700;
	animation : craoSpan 1s ease infinite;
}
.news-span-bt-js {
	background-color : #FFB687 !important ;
	color : white !important ;
	font-weight : 700 !important ;
}
.show-content {
	display : block !important;
}
.open-constum-modal {
	display : flex !important;
}
.dont-shwo {
	display: none !important;
}
 /* ========================= ANIMATIONS ============ */

@keyframes craoSpan{
	0%{
		font-size : 28px;
		text-decoration : none;
	}
	100%{
		font-size : 16px;
		text-decoration : underline;
	}

}


@keyframes underline {
	0%{
		text-decoration : underline;
	}
	100% {
		text-decoration : none;
	}
}


@keyframes rotatelogo {
	0% {
		transform : rotate(0deg);
	}
	100% {
		transform : rotate(360deg);
	}
}

@keyframes fadeDown{
	0%{
		opacity : 0.8;
		transform : translateY(-120px);
	}
	100%{
		opacity : 1;
		transform : translateY(0px);
	}
}
@keyframes flashy {
	from {
		background-color : black;
		color : red;
		text-decoration : underline;
	}
	to {
		background-color : white;
		color : black;
	}
}
/* =================================== MODAL ======================= */
.m {
	font-weight : 800;
	color : black;
}
.m {
	font-weight : 800;
	color : red;
}
.d {
	font-weight : 800;
	color : blue;
}

aside , article {
	display :flex;
	margin : 0px auto;
}
.construct {
	width : 80%;
	background : #FFB687;
	margin : 10px auto;
}
.construct h2 {
	text-align :center;
	color : black;
	font-style : italic;
	text-shadow : 3px 2px 3px white;
	font-weight : 600;
}
.whats-float {
    position: fixed;
    width: 66px;
    height: 66px;
    top: 86%;
	display: none;
}.whats-float img {
    width:100%;
    height: 100%;
    border-radius: 50%;
	/* border : 4px solid rgb(186, 45, 68); */
}
.whats-float img:hover {
	background-color: transparent;
	border-color: black;
}
.whats-float   {
	background-color: transparent;
}