/* one */

.one-section {
	background:#fff7c7 url(../images/bg-spec-l.png) repeat center top;
	background-position: 50% 50%;
    padding: 60px 0 60px;
}


.one-section .title{
	width:100%;
	margin:0 auto;
	background-image: url("../images/title-1.png");
	background-repeat: no-repeat;
	background-position: center;
	height: 138px;
  	position: relative;
	top:0;
	z-index:2;
}

/* two */

.two-section::before { 
	display: block; 
	content: ""; 
	margin-top:-61px;
	position: absolute;
	background:url(../images/bg-two-sec.png) repeat center top; width: 100%; height: 207px;
    background-position: 50% 50%;
	z-index: 5;
}

.two-section {
	background:#fbc9c3 url(../images/bg-spec-r.png) repeat center top;
	background-position: 50% 50%;
    padding: 60px 0 100px;
}

/* three */


.three-section {
	background:#fff url(../images/bg-3.png) repeat center top;
	background-position: 50% 50%;
    padding: 190px 0 190px;
}

.three-section .title{
	width:100%;
	margin:0 auto;
	background-image: url("../images/title-3.png");
	background-repeat: no-repeat;
	background-position: center;
	height: 138px;
  	position: relative;
	top:0;
	z-index:2;
}

/* four */

.four-section {
	background:#fbc9c3 url(../images/bg-spec-r.png) repeat center top;
	background-position: 50% 50%;
    padding: 60px 0 60px;
}


.four-section .title{
	width:100%;
	margin:0 auto;
	background-image: url("../images/title-1.png");
	background-repeat: no-repeat;
	background-position: center;
	height: 138px;
  	position: relative;
	top:0;
	z-index:2;
}

/* five */

.five-section::before { 
	display: block; 
	content: ""; 
	margin-top:-61px;
	position: absolute;
	background:url(../images/bg-five-sec.png) repeat center top; width: 100%; height: 207px;
    background-position: 50% 50%;
	z-index: 5;
}


.five-section {
	background:#fff7c7 url(../images/bg-spec-l.png) repeat center top;
	background-position: 50% 50%;
    padding: 60px 0 60px;
}

/* six */

.six-section::before { 
	display: block; 
	content: ""; 
	margin-top:-250px;
	position: absolute;
	background:url(../images/bg-six-sec.png) repeat center top; width: 100%; height: 207px;
    background-position: 50% 50%;
	z-index: 5;
}


.six-section {
	background:#fbc9c3 url(../images/bg-spec-r.png) repeat center top;
	background-position: 50% 50%;
    padding: 60px 0 60px;
}

/* seven */

.seven-section::before { 
	display: block; 
	content: ""; 
	margin-top:-80px;
	position: absolute;
	background:url(../images/bg-seven-sec.png) repeat center top; width: 100%; height: 207px;
    background-position: 50% 50%;
	z-index: 5;
}


.seven-section {
	background:#fff7c7 url(../images/bg-spec-l.png) repeat center top;
	background-position: 50% 50%;
    padding: 60px 0 60px;
}

/* eight */

.eight-section::before { 
	display: block; 
	content: ""; 
	margin-top:-250px;
	position: absolute;
	background:url(../images/bg-eight-sec.png) repeat center top; width: 100%; height: 207px;
    background-position: 50% 50%;
	z-index: 5;
}


.eight-section {
	background:#fbc9c3 url(../images/bg-spec-l.png) repeat center top;
	background-position: 50% 50%;
    padding: 60px 0 60px;
}

/* nine */

.nine-section::before { 
	display: block; 
	content: ""; 
	margin-top:-80px;
	position: absolute;
	background:url(../images/bg-nine-sec.png) repeat center top; width: 100%; height: 207px;
    background-position: 50% 50%;
	z-index: 5;
}

.nine-section {
	background:#fff7c7 url(../images/bg-spec-r.png) repeat center top;
	background-position: 50% 50%;
    padding: 60px 0 60px;
}

/* ten */

.ten-section::before { 
	display: block; 
	content: ""; 
	margin-top:-250px;
	position: absolute;
	background:url(../images/bg-eight-sec.png) repeat center top; width: 100%; height: 207px;
    background-position: 50% 50%;
	z-index: 5;
}


.ten-section {
	background:#fbc9c3 url(../images/bg-spec-l.png) repeat center top;
	background-position: 50% 50%;
    padding: 60px 0 60px;
}

/* eleven */

.eleven-section::before { 
	display: block; 
	content: ""; 
	margin-top:-100px;
	position: absolute;
	background:url(../images/bg-eleven-sec.png) repeat center top; width: 100%; height: 207px;
    background-position: 50% 50%;
	z-index: 5;
}

.eleven-section {
	background:#fff7c7 url(../images/bg-spec-r.png) repeat center top;
	background-position: 50% 50%;
    padding: 100px 0 100px;
}

.eleven-section .title{
	width:100%;
	margin:0 auto;
	background-image: url("../images/title-11.png");
	background-repeat: no-repeat;
	background-position: center;
	height: 138px;
  	position: relative;
	top:0;
	z-index:2;
}

/* =-=-=-=-=-=-= twelve Section =-=-=-=-=-=-= */
.twelve-section::before { 
	display: block; 
	content: ""; 
	margin-top:-250px;
	position: absolute;
	background:url(../images/bg-twelve-sec.png) repeat center top; width: 100%; height: 207px;
    background-position: 50% 50%;
	z-index: 5;
}

.twelve-section {
	padding-top:60px;
	padding-bottom:40px;
	background-color: #fff;
	position:relative;
	z-index:10;
}


/* thirteen */

.thirteen-section::before { 
	display: block; 
	content: ""; 
	margin-top:-100px;
	position: absolute;
	background:url(../images/bg-thirteen-sec.png) repeat center top; width: 100%; height: 207px;
    background-position: 50% 50%;
	z-index: 5;
}

.thirteen-section {
	background:#fff7c7 url(../images/bg-spec-l.png) repeat center top;
	background-position: 50% 50%;
    padding: 100px 0 100px;
}

/* fourteen */

.fourteen-section::before { 
	display: block; 
	content: ""; 
	margin-top:-100px;
	position: absolute;
	background:url(../images/bg-fourteen-sec.png) repeat center top; width: 100%; height: 207px;
    background-position: 50% 50%;
	z-index: 5;
}

.fourteen-section {
	background:#fff url(../images/bg-spec-l.png) repeat center top;
	background-position: 50% 50%;
    padding: 100px 0 100px;
}

/* sixteen */

.sixteen-section::before { 
	display: block; 
	content: ""; 
	margin-top:-100px;
	position: absolute;
	background:url(../images/bg-spec-16.png) repeat center top; width: 100%; height: 532px;
    background-position: 50% 50%;
	z-index: 5;
}

.sixteen-section {
	background:#fff;
    padding: 0px 0 100px;
}

.sixteen-section .title{
	width:100%;
	margin:0 auto;
	background-image: url("../images/title-16.png");
	background-repeat: no-repeat;
	background-position: center;
	height: 138px;
  	position: relative;
	top:0;
	z-index:2;
}

/* seventeen */

.seventeen-section {
	background:#fff0a4 url(../images/bg-spec-r.png) repeat center top;
	background-position: 50% 50%;
    padding: 100px 0 100px;
}

/* eightteen */

.eightteen-section {
	background:#fff7c7 url(../images/bg-spec-r.png) repeat center top;
	background-position: 50% 50%;
    padding: 100px 0 100px;
}

/* eightteen-1 */

.eightteen-1-section {
	background:#fff0a4 url(../images/bg-spec-r.png) repeat center top;
	background-position: 50% 50%;
    padding: 100px 0 100px;
}

/* nineteen */

.nineteen-section::before { 
	display: block; 
	content: ""; 
	margin-top:-260px;
	position: absolute;
	background:url(../images/bg-eight-sec.png) repeat center top; width: 100%; height: 207px;
    background-position: 50% 50%;
	z-index: 5;
}

.nineteen-section {
	background:#fbc9c3 url(../images/bg-spec-r.png) repeat center top;
	background-position: 50% 50%;
    padding: 60px 0 60px;
}

/* twenty */

.twenty-section::before { 
	display: block; 
	content: ""; 
	margin-top:-130px;
	position: absolute;
	background:url(../images/bg-twenty-sec.png) repeat center top; width: 100%; height: 207px;
    background-position: 50% 50%;
	z-index: 5;
}

.twenty-section {
	background:#fff7c7 url(../images/bg-spec-r.png) repeat center top;
	background-position: 50% 50%;
    padding: 120px 0 260px;
}

/* portfolio */

.twentyone-section::before { 
	display: block; 
	content: ""; 
	margin-top:-330px;
	position: absolute;
	background:url(../images/bg-portfolio-sec.png) repeat center top; width: 100%; height:277px;
    background-position: 50% 50%;
	z-index: 5;
}

.twentyone-section {
	background:#fbc9c3 url(../images/bg-spec-r.png) repeat center top;
	background-position: 50% 50%;
	padding: 60px 0 0;
}

.youtube-video {
	position:relative;
	top:-30px;
	margin:0 auto;
	display: block; 
	content: "";
	width:150px;
	height:102px;
	background:url(../images/icon/youtube.png) no-repeat center top;
	 background-position: 50% 50%;
}

.review-gallery {
	max-width: 100rem;
	margin: 0 auto;
	padding: 0 2rem 2rem;
	margin-top: 20px;
   }
   
   .gallery {
	display: flex;
	flex-wrap: wrap;
	/* Compensate for excess margin on outer gallery flex items */
	margin: -1rem -1rem;
   }
   
   .gallery-item {
	/* Minimum width of 24rem and grow to fit available space */
	flex: 1 0 24rem;
	/* Margin value should be half of grid-gap value as margins on flex items don't collapse */
	margin: 1rem;
	box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
	border-radius: 5%;
	overflow: hidden;
   }
   
   .gallery-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease-out;
   }
   
   .gallery-image:hover {
	transform: scale(1.15);
   }
   
   .gallery .gallery-hidden{
	 display: none;
   } 
   
   /*
   
   The following rule will only run if your browser supports CSS grid.
   
   Remove or comment-out the code block below to see how the browser will fall-back to flexbox styling. 
   
   */
   
   @supports (display: grid) {
	.gallery {
	 display: grid;
	 grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
	 grid-gap: 2rem;
	}
   
	.gallery,
	.gallery-item {
	 margin: 0;
	}
   
	.gallery-btn{
	  width: 120px;
	  overflow: hidden;
	  margin: auto;
	  margin-top: 20px;
	}
   
	.gallery-btn .btn-load{
	  color: #2a2a2a;
	  background-color: white;
	  padding: 3px 22px;
	 text-align: center;
	 text-decoration: none;
	 display: inline-block;
	 font-size: 16px;
	 border-radius: 12px;
	 margin-bottom: 20px;
	}
   
   }