/* ::-webkit-scrollbar {
	display: none;
} */

body {
	font-family: 'Poppins', sans-serif;
    background-image: linear-gradient(to right, #333, #555);
}

.nav {
	/* background-color: white; */
    background-image: linear-gradient(to right, #333, #555);
	color: #c4c4c4;
	margin-bottom: 10px;
}

.nav-center {
	display: none;
}

.nav-right {
	display: none;
}

.nav-center-mobile {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.nav-center-mobile h2 {
	margin: 0;
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* SIDE MENU */
/* .side-links a {
	color: #1DABF8;
} */

.side-menu {
	background-image: linear-gradient(to right, #333, #555);
	color: #c4c4c4;
}

.side-menu .curr-page {
	/* background-color: #1DABF8; */
	color: #1DABF8;
}

.side-menu a {
	color: #c4c4c4;
}

.side-menu table {
	border-color: #c4c4c4;
}

.side-menu input {
	color: #c4c4c4;
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.pages {
	width: 100%;
	/* margin-top: 100px; */
}

.page h1 {
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
	font-size: 15vw;
	text-align: center;
	margin-bottom: 20px;
	color: #c4c4c4;
}

button, input[type="button"] {
	background-color: #1DABF8;
	height: 50px;
	font-size: 18px;
	border-radius: 20px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	cursor: pointer;
}

.page {
	display: block;
	clear: both;
	width: 100%;
	padding: 60px 0;
	margin: 0;
}


.page1 {
	width: 100%;
	color: #c4c4c4;
	padding-top: 80px;
}

.page1 h1 {
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
	font-size: 16vw;
	text-align: left;
	margin-left: 30px;
	margin-top: 0px;
	padding-bottom: 0px;
	color: #c4c4c4;
}

.page1 h2 {
	margin-left: 30px;
	margin-bottom: 40px;
	font-size: 8vw;
}

.page1 .center-btn {
	margin-top: 40px;
}

.page1 button {
	margin: 0 8px;
}

.page1 input[type="button"] {
	color: white;
}

#page1-btn {
	background-color: #555;
	color: #C4C4C4;
}

.image-slide img {
	width: 100%;
}

.image-slide {
	width: 100%;
	overflow-x: scroll;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
  	/* scroll-padding: 50%; */
}

.image-slide::-webkit-scrollbar {
	display: none;
}

.image-slide table {
	width: 400%;
}

.image-slide table td {
	width: 25%;
	scroll-snap-align: center;
	/*border: 1px solid red;*/
}

.slide-controls {
	margin-bottom: 20px;
}

.slide-controls span {
	/* color: #cccccc; */
	color: #333;
}

.slide-controls .arrow {
	color: #1DABF8;
	font-size: 2.5em;
	transition: 0.3s;
	display: none;
}

.arrow:hover {
	color: #333;
}

.slide-controls .curr-slide {
	/* color: #49A63B; */
	color: #1DABF8;
}

.page1 .page-left p, .page p {
	margin: 20px;
	line-height: 2;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.page2 {
    background-image: linear-gradient(to right, #1DABF8, #17a6f3);
	color: white;
}

.page2 h1 {
	margin: 0;
	margin-bottom: 30px;
	text-align: center;
	color: white;
}

.page2 button {
	margin-bottom: 30px;
}

/* .page2 img {
	width: 90%;
	margin-left: 5%;
} */

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*page 3*/

.page3 {
    /* background-image: linear-gradient(to right, #FFFFFF, #c4c4c4); */
	background-color: #C82773;
	min-height: 500px;
}

.page3 h1 {
	color: white;
	text-align: center;
	/* margin-bottom: 60px; */
}

.page3 p {
	color: white;
}

.page3 button {
	margin-bottom: 30px;
	background-color: #C82773;
}

.services {
	width: 90%;
	margin: auto;
}

.service {
	display: inline-block;
	width: 100%;
	min-height: 250px;
	/* border-radius: 20px; */
	
	margin-bottom: 25px;
	overflow: hidden;
	
    background-image: linear-gradient(to right, #333, #555);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 10px;
	/* background-color: #333; */
	color: white;

	text-align: center;
	cursor: pointer;
}

.page3 .service {
    background-image: linear-gradient(to right, #ffffff, #f5f5f5, #C4C4C4);
	color: #333;
}

.service-info {
	margin: 0 5px;
}

.service-info h1 {
	font-size: 5vw;
}

.page3 h1 {
	margin-top: 0;
}

.service-info p {
	font-size: 4vw;
	color: white;
}

.page3 .service-info p {
	color: #333;
}

.service-info h4 {
	text-align: center;
	color: #1DABF8;
}

.extra-info {
	display: none;
}

#design-btn, #site-btn {
	/* background-color: white; */
	color: white;
	margin-right: 20px;
	margin-top: 30px;
	margin-bottom: 50px;
}

#graphic-prices {
	background-color: white;
	color: #C82773;
}

.price-btn {
	background-color: white;
	color: #1DABF8;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* PAGE 4 */
.page4 {
    background-image: linear-gradient(to right, #333, #555);
	color: #c4c4c4;
}

.page4 h1 {
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
	font-size: 16vw;
	text-align: left;
	width: max-content;
	margin: auto;
	margin-bottom: 50px;
	color: #c4c4c4;
}

.info-display {
	position: fixed;
	width: 90%;
	/* height: 80%; */
	height: max-content;
	padding-bottom: 30px;

	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	
	background-image: linear-gradient(to right, #FFFFFF, #c4c4c4);
	color: #1DABF8;

	z-index: 100;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	display: none;
}

.info-display .info {
	margin: 0 30px;
}

.info-display span {
	float: right;
	font-size: 2em;
	margin-right: 20px;
	margin-top: 10px;
}

.extra-info ul {
	text-align: left;
	/* margin-left: 30px; */
}

.extra-info .info-cont {
	margin-top: 15%;
	/* width: 50%; */
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*.page3 {}*/

.img-gallery {
	width: 100%;
}

.img-gallery .image {
	width: 45%;
	height: max-content;

	display: inline-block;
	margin-left: 2.5%;
}

.img-gallery .image img {
	width: 100%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	transition: 0.3s;
}

.image img:hover {
	transform: scale(1.05, 1.05);
}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* SERVICE PAGE */
.pricing-page1 {
	margin-top: 0;
	/* padding-top: 0; */
}

.pricing-page1 h1 {
	font-size: 13vw;
}

.pricing-page2 {
	padding-top: 0;
}

.pricing-page1 h1, .pricing-page2 h1 {
	margin-bottom: 60px;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* WORK PAGE */
.work-page1 {
	margin-top: 30px;
}

.work-page1, .work-page2, .work-page3 {
	min-height: max-content;
	color: #C4C4C4;
}

.work-page4 h1 {
	font-size: 13vw;
	text-align: center;
	margin-bottom: 40px;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* ABOUT PAGE */

.about-page1 {
	width: 100%;
	/* margin-top: 100px; */
	color: #C4C4C4;
	padding-bottom: 0;
}

.about img {
	width: 100%;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* CONTACT PAGE */

.contact {
	width: 100%;
	color: #C4C4C4;
}

.contact-page1 {
	width: 100%;
}

.contact h2 {
	margin-left: 20px;
}

.contact input, label, textarea, .contact button {
	margin-left: 20px;
}

.contact input, .contact textarea {
	border-color: #C4C4C4;
}

.contact input, .contact textarea {
	width: 85%;
	color: #c4c4c4;
	outline: none;
}

.contact img {
	width: 100%;
	/* border: 1px solid red; */
	padding: 0;
}

/* ///////////////////////////////////////////////////////////////////// */
.design-pages .img-gallery {
	margin-top: 50px;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.message-block {
	background-image: linear-gradient(to right, #FFFFFF, #F5F5F5,#c4c4c4);
}

.message-block input {
	outline: none;
}

.message-btn span {
	background-color: #1DABF8;
}

.info button:hover {
	transition: 0.3s;
	background-color: #333;
}

#pc-search-btn:hover {
	color: #1DABF8;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.search-results h2 {
	color: #1DABF8;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.image-viewer {
	background-image: linear-gradient(to right, #FFFFFF, #F5F5F5,#c4c4c4);
}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.footer {
    background-image: linear-gradient(to right, #555, #333);
}
/* ------------------------------------------------------------------------------------------------------------- */
/* For desktop: */
@media only screen and (min-width: 768px) {
	/* .nav {
		padding-bottom: 10px;
	} */

	.nav-center-mobile {
		display: none;
	}

	.nav-right-mobile {
		display: none;
	}

	.nav-center {
		display: inline-block;
	}

	.nav-right {
		display: inline-block;
	}

	.nav-center .curr-page {
		background-color: #1DABF8;
		color: white;
	}

	.nav a {
		color: #c4c4c4
	}

	.nav table {
		border-color: #c4c4c4;
	}

	.nav input {
		color: #c4c4c4;
	}

	/* ++++++++++++++++++++++++++++++++++++++++++ */
	/* PAGE 1 */
	.pages h1 {
		font-size: 7vw;
	}

	.page1 {
		height: 600px;
		/* border: 1px solid red;  */
	}

	.page-left {
		width: 45%;
		float: left;
	}

	.page-right {
		width: 45%;
		float: right;
		margin-right: 5%;
		/* margin-top: 20px; */
	}
	
	.page1 .page-left p, .page p {
		margin: 50px;
		line-height: 2;
	}

	.page1 h1 {
		width: 70%;
		margin: auto;
		font-size: 7vw;
	}

	.page1 h2 {
		font-size: 3vw;
		width: 70%;
		margin: auto;
		margin-top: 20px;
	}

	/* ++++++++++++++++++++++++++++++++++++++++++++++++++*/
	.page2 {
		clear: both;
	}

	.page2 h1 {
		text-align: center;
		margin-left: 40px;
	}

	.service {
		width: 30%;
		margin-left: 2.5%;
		text-align: center;
		transition: 0.3s;
	}

	.service:hover  {
		background-color: #1DABF8;
		/* transform: scale(1.05, 1.05); */
	}

	.service-info:hover h4 {
		color: white;
	}

	.page3 {
		height: 600px;
	}

	.page3 .service-info:hover h4 {
		color: #333;
	}

	.service-info p {
		font-size: 16px;
	}

	.info-display {
		width: 20%;
	}
	/* +++++++++++++++++++++++++++++++++++++++++++++++++++ */
	.img-gallery {
		width: 90%;
		margin: auto;
	}

	.img-gallery .image {
		width: 23%;
		height: max-content;
	
		display: inline-block;
		margin-left: 1.3%;
		margin-bottom: 50px;
	}
	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* WORK PAGE */
	.work-page1, .work-page2 {
		min-height: 500px;
	}

	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* ABOUT PAGE */
	.about .page-right img {
		margin-top: 60px;
	}

	.about img {
		margin-left: 15px;
	}

	/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	/* CONTACT PAGE */
	.contact-page1 {
		height: 600px;
		width: 85%;
		margin: auto;
		/* border: 1px solid red; */
	}

	.contact-page1 .page-left h2 {
		margin: 0;
		margin-left: 45px;
		margin-top: 20px;
	}

	.contact p {
		margin-top: 10px;
	}
}