/* 

Tinker Template

http://www.templatemo.com/tm-506-tinker

*/


.CellSection{
	display: none;

}

:root {
	--primary-color: rgb(17,36,130);
	--secondary-color: rgb(27,172,225);
  }

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

html{
	overflow-x: hidden;
}

ul {
	list-style: none;
	margin: 0px;
}

p {
	color: #fff;
	font-size: 16px;
	line-height: 24px; 
	font-family: 'Poppins', sans-serif;

	
}
h1{
	font-family: 'Cinzel', serif, cursive;
	font-size: 41px;
	color:white;
	text-align: center;;
}



.ScrollSection{
	scroll-snap-align: start;
}

.parallax-content {
  width: 100%;
  min-height: 100vh;
  background-size: cover;
}

.primary-white-button a {
	display: inline-block;
	background-color: var(--secondary-color);
	font-size: 16px;
	padding: 12px 18px;
	color: white;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 20px;
}

.primary-white-button a:hover {
	background-color: white;
	/* color: #121212; */
	color:var(--secondary-color);

}
.primary-blue-button{
	/* top: 420px; */
	
	position: absolute;
	/* left: 25px; */
	display: block;
    margin-left: auto;
    margin-right: auto;

}
.primary-blue-button a {
	display: inline-block;
	background-color: var(--secondary-color);
	font-size: 16px;
	padding: 12px 18px;
	color: #fff;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 20px;
	bottom:0px;


}

.pop-button h4 {
	display: inline-block;
background-color: var(--secondary-color);
	font-size: 17px!important;
	padding: 12px 18px;
	color: white;
	font-weight: 400!important;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 20px;
	cursor: pointer;
}

.pop-button h4:hover {
	
	background-color: white;
	color: var(--secondary-color);
}

.pop label{
	color:white;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
    z-index: 10000;
    transition: all 0.2s ease-in-out;
    height: 80px;
    background-color:transparent;  
    
    text-align: center;
    line-height: 40px;
}

.navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav>li>a {
    text-shadow: none;
}

.navbar-brand {
	line-height: 80px;
	padding: 0px;
}

.navbar-nav>li>a {
	color: #fff!important;
	font-size: 16px;
	font-weight: 300;
	text-transform: uppercase;
	text-shadow: none;
	line-height: 80px;
	padding: 0px;
	letter-spacing: 0.5px;
}

.navbar-nav>li {
	margin-left: 45px;
}

.header.active .navbar-nav>li>a {
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-shadow: none;
	color: #121212!important;
}

.header.active {
    background-color: rgba(250, 250, 250, 0.98);
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
.navbar-brand {
	font-family: 'Poppins', serif;
	font-size: 16px;
	text-transform: uppercase;
	color: #fff!important;
	transition: all 0.5s;
	 
}
.navbar-brand em {
	font-style: normal;
	color: var(--primary-color);
	font-size: 16px;
}
.header.active .navbar-brand {
	color: #121212!important;
}
.header .navbar-brand {
    font-weight: 800;
}
.navbar-inverse {
	background-image: none;
	background-color: transparent;
}
.header .navbar {
    margin: 0;
    border: none;
}
.page-section {
    padding: 80px 0;
}
.navbar-inverse .navbar-toggle {
	margin-top: 22px;
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
	background-color: var(--primary-color);
}
bootstrap.min.css
.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 15px!important;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
@media (min-width: 768px) {
    .header .navbar-brand {
        padding-left: 0;
    }
    .navbar-nav {
        float: right;
    }
}
@media (max-width: 480px) {
    .page-section h1 {
        font-size: 3em;
    }
    .page-section h2 {
        font-size: 2em;
    }
    .page-section p {
        font-size: 1em;
        margin: 0 0 20px;
	}


}

@media (max-width: 400px) {
	.pop h1 {
        font-size: 3em;
    }
  }

.parallax-content {
  width: 100%;
  min-height: 100vh;
  background-size: cover;
}

.baner-content {
	width: 100%;
  	/* padding-top: 35vh; */
  	text-align: center;
	background-image: url(../img/carousel-1.jpg);
	  vertical-align: middle;

}

.baner-content .container {
	width: 100%;
	min-height: 100vh;
	background-size: cover;
background-color: hsla(0, 0%, 0%,0.5 );
width: 100%;
z-index: 7;
vertical-align: middle;


}

.baner-content .text-content {
	text-align: center;
	font-family: 'Cinzel', serif, cursive;
}




.texter{
	font-weight: 700;
	font-size: 45px;
	color: #1bace1!important;
	font-family: 'Cinzel', serif, cursive;

}



.baner-content .text-content .primary-white-button {
	margin-top: 25px;


}

.baner-content .text-content p {
	font-size: 16px;
	color: #fff;
}


.baner-content .text-content .primary-white-button {
	margin-top: 25px;
}


#about {
	padding: 150px 0px;
	background-image: url(../img/about-bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;

}


/* Code relating to the about us section of the website */
#about .service-item {
	text-align: center;
	z-index: 2;
	background-color: rgba(27,172,225,1);
	transition:0.3s;
	padding: 0 4% 0 3%;
	min-height: 440px;
	background-repeat: no-repeat;
	background-position-x:center;
	color: white;
}


.service-item{
	position: relative;
	z-index: 4;
	color: white;
	
	
	
}


 /* #about .service-item:hover {
	text-align: center;
	z-index: 2;
	color:	rgba(27,172,225,1);
	background-color: white;

}  */

/* Hover effects for rectangular images of the about us secton  Rectangle 1*/


/* #rectangle1 :nth-child(1){
	background-image: url(../img/service_icon_01.png);
}

#rectangle1 :nth-child(1):hover{
	
	background-image: url(../img/service_icon_01_hover.png);
}
/* Hover effects for rectangular images of the about us secton  Rectangle 2*/
/* #rectangle2 :nth-child(1){
	background-image: url(../img/service_icon_02.png);
} */ 

/* #rectangle2 :nth-child(1):hover{
	
	background-image: url(../img/service_icon_02_hover.png);
} */

#about .service-item .icon {
	/* width: 150px; */
	height: 150px;
	display: inline-block;
	text-align: center;
	line-height: 104px;
	/* border: 3px solid #fff; */
	
	/* background-color: var(--secondary-color); */
	position: relative;
	z-index: 2;

}



#about .service-item h4 {
	margin-bottom: 30px;
	margin-top: 45px;
	font-size: 16px;
	font-weight: 500;
	color: #fff;
	letter-spacing: 1px;
}

#about .service-item .line-dec {
	width: 100%;
	height: 1px;
	background-color: rgba(250, 250, 250, 0.5);

}

/* #about .service-item p {
	color: #fff;

} */

 /* #about .service-item p:hover {
	color:	rgba(27,172,225,1);

}  */

#about .service-item .primary-blue-button {
	margin-top: 35px;
	padding-bottom: 5px;
	bottom:0;
	
	}


.projects-holder .mix {
  display: none;
}

.projects-holder {
	padding: 30px 15px 0px 15px;
	width: 100%;
}

/* .image img{
	width:800px;
} */

/* my added code */
.pre-filter-categories{
	margin-top:-10px;
	height: 40px;
	position: relative;
}

.filter-categories {
  margin-top: 180px;
  position: static;

}

.filter-categories ul li {
  margin: 0px 10px 15px 0px;
  display: block;
  border-bottom: 2px solid white;
  padding: 6px 16px;
  transition: 0.15s;
  background-color: none;
  cursor: pointer;
}

.filter-categories ul li:hover {

	margin: 0px 10px 15px 0px;
	display: block;
	border-bottom: 2px solid var(--primary-color);
	padding: 6px 16px;
  }


#portoflio .page-section {
	padding: 0px;
}

#portfolio .section-heading {
	padding-top: 110px;
	padding-bottom: 110px;
	background-color: var(--secondary-color);
	height: 732px;
	margin-left: -100vw;
	padding-left: 100vw;
}

#portfolio .project-item {
	margin: 0px -16px;
}
.filter-categories{
	margin-top: 240px;
}
#portfolio .section-heading h4 {
	margin-top: 60px;
	font-size: 17px;
	text-transform: uppercase;
	font-weight: 700;
	color: #fff;
	letter-spacing: 1px;
}

#portfolio .section-heading .line-dec {
	width: 330px;
	height: 1px;
	background-color: rgba(250, 250, 250, 0.5);
	margin: 30px 0px 15px 0px;
}

#portfolio .section-heading p {
	color: #fff;
	padding-right: 30px;
}






.owl-pagination {
  margin-top: 20px;
  opacity: 1;
  display: inline-block;
}

.owl-page span {
  display: block;
  width: 8px;
  height: 8px;
  margin: 0px 5px;
  filter: alpha(opacity=50);
  opacity: 0.5;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  background: #fff;
}




#blog {
	background-image: url(../img/blog-bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

#blog .section-heading {
	text-align: left;
	padding-top: 60px;
	padding-bottom: 60px;
	background-color: rgba(0, 0, 0, 0.5);
	height: 582px;
	margin-left: -100vh;
	padding-left: 100vh;
	overflow: hidden!important;
}

#blog .section-heading h4 {
	margin-top: 0px;
	font-size: 17px;
	text-transform: uppercase;
	font-weight: 700;
	color: #fff;
	letter-spacing: 1px;
}

#blog .section-heading .line-dec {
	width: 270px;
	height: 1px;
	background-color: rgba(250, 250, 250, 0.5);
	margin: 20px 0 15px 0;
}

#blog .section-heading p {
	color: #fff;
	padding-right: 70px;
}

.wrapper {
  text-align: center;
}

.tabs {
  list-style: none;
  margin-top: 10px;
  padding-right: 70px;
}

.tabs li {
  display: block;
  text-align: center;
  margin: 15px 0px;
}

.tabs a {
  display:block;
  text-align:center;
  text-decoration:none;
  text-transform:capitalize;
  letter-spacing: 0.5px;
  color:#121212;
  font-size: 16px;
  font-weight: 500;
  padding: 12px 12px;
  background-color: #fff;
  
}

.tabs a:hover {
  color: var(--primary-color);
}

.tabs .active {
  color: var(--primary-color);
}
#first-tab-group {
	margin-top: 30px;
	margin-bottom: 5px;
}


.tabgroup{
	background-color: #21aee3;
}

#tab4{
	background-color: #24afe5;
}
.tabgroup iframe{
	width: 100%;
	height:	350px;
	margin-bottom:-10px;
}

 .tabgroup video{
	width: 100%;
	height:	350px;
	margin-bottom:-10px;
	background: rgb(9,9,121);
    background: radial-gradient(circle, rgba(9,9,121,1) 0%, rgba(2,0,36,1) 64%);
} 

.tabgroup img{
	width: 70%;
	height:	320px;
}

#tab4 img{
	background-color: #24afe5;
	width: 90%;
}

.tabgroup .text-content	 {
  background-color: #fff;
  color: #fff;
  padding: 20px;
  text-align: left;
  height: 190px;
}
/* .wrapper .section-heading h4{
	color:rgb(9,9,121);
} */

.tabgroup .text-content h4 {
	
	color: #121212;
	margin-top: 0px;
	margin-bottom: 5px;	
    font-size: 17px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}

.tabgroup .text-content span {
	font-size: 17px;
	color: hsl(196, 79%, 49%);
}
.tabgroup .text-content a {
	font-size: 16px;
	color: #1bace1;
	text-decoration: none;
}
.tabgroup .text-content p {
	margin-top: 10px;
	color:rgb(9,9,121);
	font-size: 16px;
	
}

.otherlist{
	color:rgb(9,9,121);
	list-style-type: square;
	margin-left:20px;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
} 

.clearfix:after {
  content:"";
  display:table;
  clear:both;
}

#contact-us {
	background: rgb(9,9,121);
    background: radial-gradient(circle, rgba(9,9,121,1) 0%, rgba(2,0,36,1) 64%);
	text-align: center;
	padding: 80px 0px;
}


/* #contact-us .section-heading h4 {
	margin-top: 0px;
	font-size: 20px;
	text-transform: uppercase;
	font-weight: 700;
	color: #fff;
	letter-spacing: 1px;
} */

#contact-us .section-heading .line-dec {
	width: 270px;
	height: 1px;
	background-color: rgba(250, 250, 250, 0.5);
	margin: 20px auto 15px auto;
}

#contact-us .section-heading p {
	color: #fff;
	padding: 0px 33%;
}

#contact-us .pop-button {
	margin-top: 30px;
}

#form input {
  border-radius: 0px;
  padding-left: 15px;
  font-size: 16px;
  color: #232323;
  background-color: rgba(250, 250, 250, 1);
  outline: none;
  border: none;
  box-shadow: none;
  line-height: 50px;
  height: 50px;
  width: 100%;
  margin-bottom: 30px;
}

#form textarea {
  border-radius: 0px;
  padding-left: 15px;
  padding-top: 10px;
  font-size: 16px;
  color: #232323;
  background-color: rgba(250, 250, 250, 1);
  outline: none;
  border: none;
  box-shadow: none;
  height: 165px;
  max-height: 220px;
  width: 100%;
  margin-bottom: 25px;
}

#form button {
	all:unset;
  display: inline-block;
	background-color: var(--primary-color);
	font-size: 16px;
	padding: 12px 18px;
	color: #fff;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 20px;
	cursor:	pointer;
}


.pop #form {
	z-index: 99999;
	position: fixed;
	top: 25%;
	left: 20%;
	right: 20%;
}

.pop {
	z-index: 99999;
	text-align: center;
	padding: 30px;
    display:none;
    position:fixed;
    width: 100%;
    top:0;
    left:0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    box-shadow: 0px 0px 15px;
}

.pop span {
	z-index: 999;
	position: relative;
	margin-bottom: 20px;
	cursor: pointer;
	width: 44px;
	height: 44px;
	display: inline-block;
	line-height: 44px;
	color: #fff;
	text-align: center;
	background-color: var(--secondary-color);
}

.pop span:hover {
	background-color: #02091f;
	transition: all 0.5s;
}




footer {
	margin-top: -6px;
	background-color: var(--secondary-color);
	padding: 50px 0px;

}


footer .logo p {
	font-weight: 300;
	font-size: 16px;
	color: #fff;
	margin-bottom: -10px;
	letter-spacing: 0.5px;
}

footer .logo span {
	font-weight: 600;
	color: var(--primary-color);
}

footer .logo a {
	color: #FFF;
}


footer .location{
	border-left: 1px solid var(--primary-color);
	padding-left: 15px;
	color: var(--primary-color);;
	height:220px;
	
}
/* footer input{
	width:70%;
	height: 40px;
} */
footer button{
	all:unset;
    display: inline-block;
    background-color: var(--primary-color);
    font-size: 16px;
    padding: 12px 18px;
    color: white;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
	border-radius: 20px;
	width:80%;
	display: block;
    margin-left: auto;
	margin-right: auto;
	text-align: center;
	cursor: pointer;
}
.footer-button:hover{
color: var(--primary-color);
background-color:white;
}

footer .first{
	border-left: none;
	padding-left: 15px;
	color: var(--primary-color);
}

footer .location h4 {
	margin-top: 0px;	
	font-weight: 500;
	color: var(--primary-color);
	/* text-transform: uppercase; */
	/* font-family: 'Cinzel', serif, cursive; */
	font-weight: 80px;
	letter-spacing: 0.5px;
	margin-bottom: 30px;

    font-size: 20px;
    text-transform: uppercase;
    font-weight: 700;
    /* color: #fff; */
    letter-spacing: 1px;
}

footer .location ul li {
	font-size: 16px;
	color: var(--primary-color);
	display: inline-block;
	line-height: 24px;
	letter-spacing: 0.5px;
	padding-top: 5px;
	padding-bottom: 5px;
}

/* footer .location ul li:first-child {
	margin-right: 15px;
	padding-right: 15px;
	border-right: 1px solid rgba(250, 250, 250, 0.1);
} */

footer .form-info h4 {
	margin-top: 0px;
	font-size: 17px;
	font-weight: 500;
	color: #fff;
	/* text-transform: uppercase; */
	letter-spacing: 0.5px;
	margin-bottom: 30px;
}

footer .form-info ul li {
	font-size: 16px;
	color: #fff;
	display: inline-block;
	line-height: 24px;
	letter-spacing: 0.5px;
	padding-top: 5px;
	padding-bottom: 5px;
	font-weight: 300;
	margin-bottom: -15px;
}

footer .form-info ul li em {
	font-style: normal;
	font-weight: 500;
}

footer .connect-us h4 {
	margin-top: 0px;
	font-size: 17px;
	font-weight: 500;
	color: #fff;
	/* text-transform: uppercase; */
	letter-spacing: 0.5px;
	margin-bottom: 35px;
}

footer .connect-us ul li {
	display: inline-block;
	margin-right: 2px;
}

footer .connect-us .social-link {
	display: inline-block;
	width: 28px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	background-color: var(--primary-color);
	border-radius: 50%;
	color: white;
	font-size: 16px;
	transition: all 0.3s;
	margin-left: 10px;
}

footer p {
	color: var(--primary-color);;
	transition: 200ms;
}
footer p:hover {
	color: white;
	/* cursor: pointer; */
}
footer .connect-us ul li a:hover {
	background-color: var(--primary-color);;
}

.footer-links{
	color: var(--primary-color);
	font-size: 16px; 
	font-family: 'Poppins', sans-serif;

}

.footer-links:hover{
	color: white;
	font-size: 16px; 


}


 /* .location .input{
	border-radius: 30%;
	width: 120px;
} */


/* RESPONSIVE */

@media (max-width: 991px){

	.baner-content .text-content p {
		padding: 0px 15%;
	}


	#about .service-item {
		margin-bottom: 80px;
	} 

	#portfolio .section-heading {
		text-align: center;
		padding-top: 100px;
		padding-bottom: 100px;
		background-color: var(--secondary-color);
		height: 505px;
		margin-left: -15px;
		padding-left: 0vh;
		margin-right: -15px;
		padding-right: 0vh;
		overflow: hidden;
	}

	#portfolio .section-heading .line-dec {
		margin: 20px auto 15px auto;
	}

	#portfolio .section-heading p {
		padding: 0px 20px;
	}

	.projects-holder {
		text-align: center;
		padding: 15px 0px;
	}

	#portfolio .project-item {
		margin: 15px 0px;
	}

	#blog .section-heading {
		text-align: center;
		padding-top: 100px;
		padding-bottom: 100px;
		background-color: rgba(0, 0, 0, 0.5);
		margin-left: -15px;
		padding-left: 0vh;
		margin-right: -15px;
		padding-right: 0vh;
		overflow: hidden!important;
	}

	#blog .section-heading .line-dec {
		margin: 20px auto 15px auto;
	}

	#blog .section-heading p {
		padding: 0px 30px;
	}

	.tabs {
		padding: 0px 45px;
	}

	#first-tab-group {
		margin-bottom: 30px;
	}

	#contact-us .section-heading p {
		padding: 0px 10%;
	}

	footer {
		text-align: center;
	}

	footer .logo {
		margin-bottom: 30px;
		padding-bottom: 30px;
		border-bottom: 1px solid rgba(250, 250, 250, 0.1);
	}

	footer .location {
		margin-bottom: 30px;
		padding-bottom: 30px;
		border-bottom: 1px solid rgba(250, 250, 250, 0.1);
	}

	footer .contact-info {
		margin-bottom: 30px;
		padding-bottom: 30px;
		border-bottom: 1px solid rgba(250, 250, 250, 0.1);
	}

	footer .contact-info ul li {
		margin-right: 10px;
		margin-left: 10px;
	}

}
:root {
	--bg-color: rgb(17,36,130);
  }

  
  /* div:hover {
	--bg-color: #9c27b0;
  } */
.logo{
	height:50px;
}
/* 
 #testimonial {
	background-image: url(/img/dark-wall.jpg);
	text-align: center;
	width:100vw;
	height: 120%;
}  */

/* Testimonial image one  Testimonial image one  Testimonial image one  Testimonial image one  Testimonial image one 
/* .stories div:nth-child(1) {
	background-image: url(../img/happy-client-one.jpg);
	background-size: cover;
	transition:	0.5s;
}

.stories div:nth-child(1):hover{
	background-image: url(../img/happy-client-one-hovered.jpg);
	background-size: cover;
	cursor: pointer; */

/* Testimonial image two  Testimonial image two  Testimonial image two  Testimonial image two  Testimonial image two  */

/* .stories div:nth-child(2) {

}

.stories div:nth-child(2):hover {
ddf
} */
/* Testimonial image Three  Testimonial image Three  Testimonial image Three  Testimonial image Three  Testimonial image Three  */
/* .stories div:nth-child(3) {
	background-image: url(../img/happy-client-three.jpg);
	background-size: cover;
	transition:	0.5s;
	cursor: pointer;
}

.stories div:nth-child(3):hover{
	background-image: url(../img/happy-client-three-hovered.jpg);
	background-size: cover;
	transition:	0.5s;
} */



/* Testimonial image Four  Testimonial image Four  Testimonial image Four  Testimonial image Four  Testimonial imageFour  */
/* 
.stories div:nth-child(4){
	background-image: url(../img/happy-client-four.jpg);
	background-size: cover;
	cursor: pointer;
	transition:	0.5s;
}

.stories div:nth-child(4):hover{
	background-image: url(../img/happy-client-four-hovered.jpg);
	background-size: cover;
	cursor: pointer;
} */


/* Testimonial image five  Testimonial image five  Testimonial image five  Testimonial image five  Testimonial imagefive  */

/* .stories div:nth-child(5) {
	background-image: url(../img/happy-client-five.jpg);
	background-size: cover;
	transition:	0.5s;
}


.stories div:nth-child(5):hover {
	background-image: url(../img/happy-client-five-hovered.jpg);
	background-size: cover;
	transition:	0.5s;
} */
/* Testimonial image six  Testimonial image six  Testimonial image six  Testimonial image six  Testimonial imagesix 
.stories div:nth-child(6) {
	background-image: url(../img/happy-client-six.jpg);
	background-size: cover;
	transition:	0.5s;
}

.stories div:nth-child(6):hover{
	background-image: url(../img/happy-client-six-hovered.jpg);
	background-size: cover;
	transition:	0.5s;
}


.stories div{
	left:-1;
	height:40vh;	
	text-align: centre;
	background-color: darkcyan; */
	/* border: 3px solid rgba(255, 255, 255, 0.007) */
	

/* 
.stories div:hover{
	--bg-color: #9c27b0; */
	/* border: 3px solid rgba(255, 255, 255, 0.007) */
	


/* top and bottom lines top and bottom lines top and bottom lines  */
/* .stories div::before{
	Content: '';
color:white;
transition: 0.5ms;
position: absolute;
top:10px;
left:10px;
right: 10px;
bottom: 10px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
 transform: scaleX(0); 
 transition: 0.5s;
 opacity: 0;
} */

/* .stories div:nth-child(1):hover:before{
	Content: '';
	color:white;
	transform: scaleX(1); 
	opacity: 1;

	} */

/* left and right lines left and right lines left and right lines left and right lines */

/* .stories div::after{ */
	/* Content: '';
color:white;
transition: 0.5ms;
position: absolute;
top:10px;
left:10px;
right: 10px;
bottom: 10px;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
 transform: scaleY(0); 
 transition: 0.5s;
 
}

.stories div:nth-child(1):hover::after{
	color:white;
	transform: scaleY(1); 
	opacity:1;
	} */
#branding, #blogs, #example, #overall{
	display:none;
}


@media (max-width: 768px){
	.baner-content .text-content p {
		padding: 0px 10%;
	}
	#main-nav {
		margin-left: -15px;
		margin-right: -15px;
		border-top: none;
		margin-top: 15px;
		background-color: rgba(250, 250, 250, 0.95);
	}

	.navbar-nav {
		margin-top: 0px;
		margin-bottom: 0px;
	}

	.navbar-inverse .navbar-nav>li {
		margin-left: 0px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}

	.navbar-inverse .navbar-nav>li:last-child {
		border-bottom: none;
	}


	.navbar-inverse .navbar-nav>li>a {
		font-family: 'Poppins', sans-serif !important;		
		line-height: 55px;
		color: #343434!important;
	}

}
/* Cellphone view Cellphone view Cellphone view Cellphone view  */
@media (max-width: 485px){
	p{
		font-size: 9px;
	}
	.pop h1 {
        font-size: 2rem;
    }
	footer .location ul li {
		display: block;
	}

	footer .location ul li:first-child {
		margin-right: 0px;
		padding-right: 0px;
		border-right: none;
	}
	.removed-from-cellview {
	display: none;
}
.header{
	display: none;
}



#home{
	display: none;
}

#about{
	display: none;
}

#portfolio{
	display: none;
}

#testimonial{
	display: none;
}

#blog{
	display: none;
}


#contact-us{
	display: none;
}

/* #footer{
	display: none;
} */

footer{
	display: none;
}

body{
	scroll-snap-type: y mandatory ;
	overflow-y: scroll;
	/* height: 100vh; */
	
} 

/* #cellphone-site{
	scroll-snap-type: x proximity;
	height: 300vh;
	overflow-x: scroll;
} */
.CellSection{
	display: block;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	scroll-snap-align: y;
	/* position:relative; */

	/* background-color: var(--primary-color); */

}


/* .cell-background-img-2{
	z-index: -4;
	position: fixed;
	height: 40%;
	bottom:0;
	/* background-color: var(--primary-color); 

} 

*/
#cellphone-site >section:nth-child(1)>div{
background: rgb(0,0,36);
background: linear-gradient(180deg, rgba(0,0,36,0) 0%, rgba(17,36,130,1) 33% 50%);
height: 100vh;
z-index: 5;
/* position: absolute; */
}

#cellphone-site >section:nth-child(1)>img{
	z-index: -4;
	position: absolute;
	top:0;
	height: 300px;
	/* background-color: var(--primary-color); */
}

#cellphone-site >section:nth-child(2)>div{
	background: rgb(0,0,36);
	background: linear-gradient(0deg, rgba(0,0,36,0) 0%, rgba(27,172,225,1) 33% 100%);
	width: 100vw;
	height: 100vh;
	top: 100vh;		
	position: absolute;
	/* margin-top:  */
	z-index: 6;

	}
#cellphone-site >section:nth-child(2)>img{
	z-index: -3;
	/* position: fixed; */
	/* top:calc(200vh - 300px); */
	top: calc(200vh - 300px);
	left:0;
	height: 300px;
 position: absolute;
	/* background-color: var(--primary-color); */
}


	#cellphone-site >section:nth-child(3)>div{
		background: rgb(0,0,36);
background: linear-gradient(180deg, rgba(0,0,36,0) 0%, rgba(17,36,130,1) 33% 50%);
		width: 100vw;
		height: 100vh;
		top: 200vh;		
		position: absolute;
		/* margin-top:  */
		z-index: 6;
	
		}
		

	


.CellSection h1 {
	font-family: 'Cinzel', serif, cursive;
	font-size: 16;
	text-align: center;
	position: static;
	z-index: 7;

	}

.CellSection p {
font-size: 16px;
text-align: center;
position: static;

}


#about .service-item .icon {
	width: 180px;
	height: 100px;
	display: inline-block;
	text-align: center;
	line-height: 104px;
	/* border: 3px solid #fff; */
	
	/* background-color: var(--secondary-color); */
	position: relative;
	z-index: 2;

}
	}