@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');
body{font-family: 'Tajawal', sans-serif; }
/****************** Header **********************/
body {background: #FFF;}
.nomargin { margin: auto;}
.nopadding { padding: 0px;}
/*******************************************************/
.mobile-view { display: none}
/*************************************************/
.projects-bg{background: url( "../img/header.png") no-repeat center top ;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:375px;}
.headz { height: 100%}
.qur-proj{position: relative;  height: 95%;background: url( "../img/water.png") no-repeat left bottom ; z-index: 200;}
/*.qur-proj img {position: absolute;left: 0;  bottom: 0; margin-bottom: 18px;}*/
.txt-proj  {padding:6% 0 0 0 ;}
.txt-proj h2 {color: #7E6C5C;
font-family: 'Tajawal', sans-serif;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 156.5%;
text-transform: capitalize;}
.txt-proj h2>span {color: #F26530;}
.txt-proj p {
  margin: auto;
    width: 78%;
	color: #685A4D;
	text-align: center;
	font-size: 38px;
	font-style: normal;
	font-weight: 700;
	line-height: 137%; /* 32.88px */
	text-transform: capitalize;
}
.txt-proj p span {color: var(--primary);}
p.p-zmall{ display: none;}
.form-control{box-shadow: 0px 3.11579px 3.11579px rgba(0, 0, 0, 0.00) !important;}
/***********************************************************/
.projects-title{ padding-top: 32px; padding-bottom: 40px;}
.projects-title h2 {
	color: var(--secondary, #87786C);
text-align: center;
font-size: 35.252px;
font-style: normal;
font-weight: 700;
padding: 0px !important;
}
.pagini {
    padding: 32px;
    padding-bottom: 0px;
}
/*********************11111111111111111111*******************************************/
.c-frist { padding: 32px 0px;}
.c-intro { margin-bottom: 32px;}
.c-intro h2{
font-weight: 700;
font-size: 32px;
line-height: 153%;
text-transform: capitalize;
text-align: center;
color: #87786c;
}
.c-intro p{
font-weight: 500;
font-size: 24px;
line-height: 153%;
text-transform: capitalize;
text-align: center;
color: #685a4d;
}
.c-ul-steps{
    margin-top: 25px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding-right: 0;
    margin-bottom: 0;
    list-style: none;
}
.c-steps-mobile{display: none;}
.c-ul-steps p
{
font-weight: 500;
font-size: 20px;
line-height: 129%;
text-transform: capitalize;
text-align: center;
color: #363636;
}
.c-ul-steps li:first-child p { width:60%;}
.c-ul-steps li:last-child p { width:60%;margin: auto; margin-left: 0px;}
.step1-arr { background: url("../img/arrow1.svg") no-repeat left center; width: 297px; height: 111px;}
/*ul.c-steps li:first-child:after { display:inline-block;position: absolute; left: 0; margin-right: 12px; top:10px; content: url("../img/arrow1.svg")}*/
/**************************************************************/
.c-projects {background-color: #FFF8F6; padding: 42px 0px 42px 0px;}
.c-projects-title{
font-weight: 700;
font-size: 32px;
line-height: 153%;
text-transform: capitalize;
text-align: center;
color: #87786c;}
.c-card{
border-radius: 24px;
background-color: #FFF
}
.c-projects-title{ margin-bottom: 32px;}
.c-sample-img img{
	border-radius: 24px 24px 0 0;
	min-height:355px;
}
.c-sample-des{
	padding: 24px;
}
.c-sample-des h2{
font-weight: 700;
font-size: 32px;
line-height: 153%;
text-transform: capitalize;
text-align: right;
color: #87786c;
}
.c-sample-des p{
font-weight: 500;
font-size: 24px;
letter-spacing: 0.01em;
text-align: right;
color: #6c727f;
}
/****************************************************************/
.c-button {margin: 24px 0px;}
.c-button a{
	border-radius: 16px;
padding: 12px 44px;
background: var(--primary);
font-weight: 500;
font-size: 32px;
line-height: 153%;
text-align: center;
color: #fff;
	text-decoration: none;
height: 73px;
}
/*********************************************/
.know-more {
	padding-bottom: 30px;
}
.know-more h2 {
    color: var(--secondary, #87786C);
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 152.9%;
    text-transform: capitalize;
}
.accordion-body{ color:#363636}
.accordion-button:focus {
    z-index: 3;
    border-color: #F26538;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(255, 102, 51, 0);
	font-weight: 600 !important;
}

.know-more .accordion-button {
color: var(--tertiary, #6C727F);
font-family: Tajawal;
font-size: 19.537px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 29.306px */}


/******************************Paginiation *********************/

/***********************   Responsive   *************************/
@media (max-width:1920px) {
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1590px;}

}

@media (max-width:1702px) {

}
@media (max-width:1536px) {
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {max-width: 1294px;}
.projects-bg {background: url( "../img/bg-1536.png") no-repeat center top; height: 300px;}
.qur-proj {background: url("../img/water-1536.png") no-repeat right bottom; background-size: contain}
	.txt-proj p {font-size: 26px;}
.know-more a {font-size: 26.05px;}
.c-intro h2 {font-size: 24px;}
.c-intro p {font-size: 18px; width: 90%;    margin: auto;}
.c-ul-steps p {font-weight: 500;font-size: 15px	}
.c-button a {
border-radius: 12px;
padding: 9px 33px;
font-weight: 500;
font-size: 24px;
height: 55px;
	}
.c-steps img{ max-width: 1050px;}	
.c-sample-des p{
	font-weight: 500;
font-size: 18px;
letter-spacing: 0.01em;
	}
.c-projects-title h2, .c-sample-des h2{font-weight: 700;font-size: 24px;}
}


@media (max-width:1440px) {

.projects-bg {background: url( "../img/bg-1440.png") no-repeat center top; height: 282px;}
.qur-proj{position: relative;  height: 95%;background: url( "../img/water-1440.png") no-repeat left bottom ;background-size: contain;}
.know-more a {font-size: 24px;}
.c-steps img {
    max-width: 908px;
}	




}
@media (max-width: 1350px){

}
@media (max-width:1280px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
      max-width: 1192.5px;}
		.projects-bg {background: url( "../img/bg-1280.png") no-repeat center top;}
      .projects-bg {height: 250px;}
	.qur-proj {
    position: relative;
    height: 95%;
    background: url(../img/water-1280.png) no-repeat left bottom;
    background-size: contain;
}
      .txt-proj {padding: 38px 0 0 0;}
	 .know-more a {font-size: 21px;}
.c-steps img {
    max-width: 920px;
}

}

@media (max-width:1137px){

}
@media (max-width:1024px) {
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {max-width:960px;}
.projects-bg{background: url( "../img/bg-1024.png") no-repeat center top ; height: 200px;}
.projects-bg {height: 200px;}
 .know-more h2 {font-size: 21px;}
.c-steps img {
    max-width: 895px;
}


}
@media (max-width:993px) {
.projects-bg{background: url( "../img/bg-990.png") no-repeat center top ; height: 195px;}
.projects-bg {height: 195px;}
.qur-proj{position: relative;  height: 100%;background: url( "../img/water-990.png") no-repeat right bottom ;background-size: contain;}
.c-steps img {
    max-width: 83%;
}
	.c-ul-steps {
		margin-top: 15px;}
	.c-steps li{width: 30%;}
	.txt-proj p {
        font-size: 21px;
    }
}
@media (max-width:900px) {

p.p-larj { display: none;}
p.p-zmall { display: block}
}
 

@media (max-width: 772px){
.txt-proj p {width: 95%;}
}
@media (max-width:768px) {
 .know-more h2 {font-size: 21px;}

}
@media (max-width:767px) {

}
@media (max-width:702px) {
	.projects-bg{background: url( "../img/bg-702.png") no-repeat center top ; height: 194px;}
.projects-bg {height: 195px;}
    .qur-proj { display: none;;}
    .txt-proj{ width: 100%;}
    .txt-proj p {  font-size: 18px;  width: 84%;}
	
	.txt-proj h2 {font-size: 26px;}
	p.p-zmall {
    display: block;
    margin-right: 0px;
    width: 55%;
    color: #685A4D;
    text-align: center;
    font-family: Tajawal;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 135%;
    text-transform: capitalize;
    margin: auto;
    margin-right: 7%;
}


}
@media (max-width:550px) {
.family_breakfast_btn button.like-button { width: 77%; margin-bottom: 0px;}
.card-body2 {padding-bottom: 8px;}
.projects-bg {background: url( "../img/bg-551.png") no-repeat center top;height: 195px;}
.projects-bg {height: 195px;}
p.p-zmall {
    display: block;
    margin-right: 0px;
    width: 50%;
    color: #685A4D;
    text-align: center;
    font-family: Tajawal;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 135%;
    text-transform: capitalize;
    margin: auto;
		margin-left: 40%;
}
.know-more {padding-bottom: 18px;}
.c-steps{display: none;}
.c-steps-mobile{display: block;}
.c-ul-steps-mobile{list-style: none;margin: auto; padding: 0px;}	
.c-sample-img img {
    border-radius: 24px 24px 0 0;
    min-height: auto;
}	
	
	
	}
@media (max-width:450px) {
}
@media (max-width:425px) {

}
@media (max-width:375px) {
.projects-bg {background: url( "../img/bg-3751.png") no-repeat center top;height: 189px;}
.projects-bg {height: 189px;}
.qur-proj { display: none;;}
.txt-proj h2 {font-size: 21px;}
 p.p-larj { display: none;}
 p.p-zmall { display: block;
 margin-right: 0px;
 width: 60%;
color: #685A4D;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 121%; /* 16.94px */
margin:auto;
	margin-right: 3%;}
.know-more h2 {font-size: 18px;}
    .know-more .accordion-button {  font-size:16px;}

}
	@media (max-width:365px) {	
	
	}
@media (max-width:320px) {


}