html {
	scroll-behavior: smooth;
}

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

h3{
	margin-bottom:0.5em !important;
}

a {
	text-decoration: none;
}

	a:hover {
		text-decoration: none;
	}

li {
	list-style: none;
}

p {
	font-size: 1rem;
	line-height: 1.6;
	font-weight: 400;
	color: #606060;
}

.hidden {
	display: none !important;
}

.invisible {
	visibility:hidden !important;
}

span.smaller{
	font-size:0.9em;
}

.extradiv h2, .servicediv h2 {
	font-size: 0.9rem;
	margin: 20px 0 15px 0;
	font-weight: bold;
	line-height: 1.1;
	word-spacing: 4px;
}

.mobile-break {
	display: none;
}

.desktop-break {
	display: inline;
}

button,
input[type=button] {
	outline: none !important;
}

	button::-moz-focus-inner,
	input[type=button]::-moz-focus-inner {
		border: 0 !important;
	}

.navbar-toggler {
	background-color: #00abff;
}

i {
	color: #2fccd0;
}

/* XXXXXXXXXXXXXXXXXXXXX common style ends here XXXXXXXXXXXXXXXXXXX */
.header {
	width: 100%;
	height: 100vh;
	background-image: linear-gradient(rgba(0,168,255,0.3), rgba(0,168,255,0.3)), url("../image/header-bg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	clip-path: polygon(100% 0, 100% 77%, 50% 100%, 0 75%, 0 0);
	position: relative;
}

	.header::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		opacity: 0.4;
		z-index: -1;
		background: linear-gradient(to right, #1e5799 0%, #3ccdbb 0%, #16c9f6 100%);
	}

.navbar::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0.4;
	z-index: -1;
	background: linear-gradient(to right, #1e5799 0%, #3ccdbb 0%, #16c9f6 100%);
}

.nav-item a {
	color: #fff !important;
	font-weight: normal;
	letter-spacing: 2px;
}

.nav-item {
	margin: 0 10px;
}

.header-section {
	width: 100%;
	background-image: url('../Images/knitting-hero.png');
	display: grid;
	grid-template-columns: 30% 70%;
	padding-top: 20vh;
	background-size: cover;
	height: inherit;
	color: #fff;
	text-align: center;
	position: relative;
}

.right-shape svg {
	fill: #247a8b;
	fill-opacity: 0.6;
	pointer-events: initial;
	width: 50%;
	margin: 10% 0;
}

.right-div {
	grid-row: 2;
	padding-top: 20vh;
	grid-column: 2;
}

.left-div {
	grid-column: 2;
	grid-row: 2;
}

.philosophyContent {
	display: grid;
	grid-template-columns: 40% 60%;
	grid-gap: 1.5em;
}

	.philosophyContent p {
		text-align: left;
	}

.philosophyText {
	color: #1c355e !important;
	font-size: 1.2em !important;
	line-height: 1.8 !important;
	padding: 0 0 0 2em !important;
}

	.fullWidth{
		width:100%;
	}

.listing, .listingProduct {
	display: grid;
	grid-template-columns: 40px auto;
	align-items: center;
	padding-left: 2em;
}
.listing {
	padding-left: 2em;
}

.listingProduct {
	padding-left: 0em;
}

	.listingProduct p {
		padding-left: 0em;
		font-size: 1em !important;
		margin-bottom:0;
		margin-left:0.5em;
	}

.listing p {
	padding-left: 1em;
	color: #1c355e !important;
	font-size: 1.1em !important;
	line-height: 1.8 !important;
	margin-bottom:0;
}

.swissmade{
	margin:0.75em 0 1em;
}

.header-buttons a, .finishOrder, .saveOrder {
	border: 1px solid #fff;
	border-radius: 100px;
	margin: 0 5px;
	padding: 12px 35px;
	outline: none;
	color: #920f0f;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
	background-color: azure;
}

.backBtn {
	border: 1px solid #cdcdcd;
	border-radius: 100px;
	margin: 0 5px 10px;
	padding: 12px 35px;
	outline: none;
	color: #920f0f;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
	background-color: azure;
}

.itemCount a{
	font-size:0.85em;
}

.finishOrder, .saveOrder {
	color: #fff !important;
	background: rgb(191,66,146);
	background: linear-gradient(-45deg, rgba(191,66,146,1) 0%, rgba(28,53,94,1) 100%, rgba(0,212,255,1) 100%);
	float: right;
}

.header-buttons a.activeCTA {
	color: #fff !important;
	background: rgb(191,66,146);
	background: linear-gradient(-45deg, rgba(191,66,146,1) 0%, rgba(28,53,94,1) 100%, rgba(0,212,255,1) 100%);
}

.header-buttons a:hover {
	text-decoration: none;
	color: #50d1c0;
	background-color: #fff;
	box-shadow: 0 0 20px 0 rgba(0,0,0,0.3);
}

.orderBtn {
	border: 1px solid #fff;
	border-radius: 100px;
	margin: 0 5px;
	padding: 12px 35px;
	outline: none;
	color: #920f0f;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
	background-color: azure;
	color: #fff;
	background: rgb(191,66,146);
	background: linear-gradient(-45deg, rgba(191,66,146,1) 0%, rgba(28,53,94,1) 100%, rgba(0,212,255,1) 100%);
}


	.orderBtn:hover {
		text-decoration: none;
		color: #50d1c0;
		background-color: #fff;
		box-shadow: 0 0 20px 0 rgba(0,0,0,0.3);
	}


.right-div p {
	font-size: 1.5rem;
	padding: 10px 0 20px 0;
	color: #fff;
}
/* ********************* three extra header div starts ******************** */

.header-extradiv {
	width: 100%;
	height: auto;
	margin: 100px 0;
	text-align: center;
}

.spots .row div {
	border-radius: 10px;
}

.extradiv p {
	text-align: center;
}

.extradiv {
	background-color: #fff;
	border: none;
	padding: 30px !important;
	border-radius: 3px;
	transition: 0.3s;
}

	.extradiv:hover {
		box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	}

.twospan {
    grid-column: span 2;
}

.globalTwospan {
    grid-column: span 2;
}


.titleLight {
    color: #4e80b6 !important;
    font-size: 0.8em;
}

.buyProductContentRight {
	padding-right: 2em 2em 0 1em;
}

	.buyProductContentRight p {
		color: #1c355e !important;
		font-size: 1.1em !important;
		line-height: 1.5 !important;
	}

	.buyProductContentRight h3 {
		padding-top:1em;
	}

.buyProductContentRight p.addedSuccees {
	font-size: 0.85em !important;
	color: #16ab2a !important;
	padding:0.25em 0;
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.fade-out {
	animation: fadeOut ease-in-out 4s;
	-webkit-animation: fadeOut ease-in-out 4s;
	-moz-animation: fadeOut ease-in-out 4s;
	-o-animation: fadeOut ease-in-out 4s;
	-ms-animation: fadeOut ease-in-out 4s;
}

.basketPanel {
	position: fixed;
	display: grid;
	top: 10px;
	right: 15px;
	width: 75px;
	height: 75px;
	z-index: 200;
	background-color: #d6eeff;
	border: 1px solid #49b7f5;
	border-radius: 50%;
	cursor: pointer;
}

.basketPanel:hover {
	background-color: #c1e5ff;
}

.basketPanel img {
	width: 70%;
	margin:0.75em auto;
}

.basketCount {
	position: absolute;
	top: 23px;
	left: 22px;
	font-size: 1.3em;
	color: #ffa046;
	width: 30px;
	height: 30px;
	z-index: 300;
	text-align: center;
	margin: 0 auto;
}

.basketItems{
}

.basketItem {
	display: grid;
	grid-template-columns: 20% 30% 20% 30%;
	grid-gap: 1em;
	background-color: #d6eeff;
	padding: 1em;
	border-radius: 10px;
	margin-bottom: 1em;
}
	.basketItem p {
		color: #1c355e;
	}

.shoppingCosts, .totalCosts {
	display: grid;
	grid-template-columns: 20% 30% 20% 30%;
	grid-gap: 1em;
	background-color: #d6eeff;
	padding: 1em;
	border-radius: 10px;
	margin-bottom: 1em;
}

.tableHeaderText {
	color: #49b7f5;
	font-size:0.85em;
	text-transform:uppercase;
	display:block;
}

.tableTotalText {
	font-weight:bold;
	color: #49b7f5;
	font-size: 1em;
	text-transform: uppercase;
	display: block;
}

/* ********************* three extra header div ends ******************** */
/* ******************* service offer css start ********************** */
.serviceoffers {
	background-color: #f7f7f9;
	padding: 50px 0;
	margin-bottom: 50px;
}

.buyProductArea {
	background-color: #fff;
	padding: 50px 0;
	margin-bottom: 50px;
}

.headings {
	margin-bottom: 50px;
}

h1 {
	color: #fff;
	font-size: 3.5rem !important;
	letter-spacing: 1px;
}

.headings h1 {
	color: #1c355e;
	font-size: 1.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom:1em;
}


.names h1 {
	color: #1c355e;
	font-size: 0.9rem;
	text-transform: uppercase;
	font-weight: bold;
}

.service-icons {
	display: flex;
	justify-content: center;
	align-items: center;
}

.progress {
	height: 0.6rem !important;
	margin-bottom: 25px !important;
}
/* ******************* service offer css ends ********************** */

/* ********************* project (completed) starts ****************************** */

.project-work {
	margin: 100px 0;
}

	.project-work h1 {
		font-size: 2rem;
		text-align: center;
	}
/* ********************* project (completed) ends ****************************** */

/* ********************* our pricing starts ******************************  */

.pricing {
	width: 100%;
	height: 100vh;
	padding: 50px;
	position: relative;
}

	.pricing::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: -1;
		background: linear-gradient(160deg, #16c9f6 55%, #fff 0%);
	}

.money {
	font-size: 40px;
	line-height: 1;
	color: #606060;
}

.card {
	transition: 0.4s ease;
}

.card-header {
	font-size: 1.6rem;
	font-weight: bold;
	background: #fff !important;
	padding: 25px 0 !important;
}

.card-body {
	padding: 30px 0 !important;
}

	.card-body li {
		margin: 10px 0;
		font-weight: 400;
		font-size: 15px;
		line-height: 1.6;
		color: #606060;
	}

.card-footer {
	background: #fff !important;
	padding: 30px 0 !important;
}

	.card-footer a {
		border: 1px solid #50c1d0;
		border-radius: 100px;
		margin: 0 5px;
		padding: 12px 35px;
		outline: none;
		color: #50d1c0;
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.4;
		text-align: center;
	}

.card:hover .card-footer a {
	text-decoration: none;
	color: #fff;
	background-color: #50d1c0;
	box-shadow: 0 0 20px 0 rgba(0,0,0,0.3);
}

.card:hover {
	transform: translateY(-20px);
	box-shadow: 0 0 20px 0 rgba(0,0,0,0.3);
}

	.card:hover .card-header, .card:hover .money {
		color: #50d1c0;
	}

.card-second {
	transform: translateY(-20px);
	/* box-shadow: 0 0 20px 0 rgba(0,0,0,0.3); */
}
/* ********************* our pricing ends ****************************** */


/* ********************* our happy clients starts ******************************  */

.happyclients {
	width: 100%;
	height: 100vh;
	padding: 80px 0;
}

.box {
	text-align: center;
	border: 1px solid rgba(0,0,0,0.2);
	box-shadow: 0 5px 10px 0 rgba(0,0,0,0.3);
	border-radius: 2px;
	transition: 0.3s ease;
}

	.box:hover {
		background: #16c9f6;
	}

		.box:hover p {
			color: #fff;
		}

.carousel-indicators {
	position: absolute;
	right: 0;
	bottom: -60px !important;
}

	.carousel-indicators li {
		background-color: #16c9f6 !important;
	}

.box a {
	position: relative;
}

	.box a img {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		margin-top: 20px;
	}

	.box a::after {
		content: "\f10d";
		font-family: FontAwesome;
		width: 40px;
		height: 40px;
		background: linear-gradient(to right, #1e5799 0%, #3ccdbb 0%, #16c9f6 100%);
		color: #fff;
		position: absolute;
		top: 120%;
		left: 70%;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

.box h1 {
	font-size: 18px;
	font-weight: 700;
	color: #000;
	margin-bottom: 10px;
}

.box h2 {
	font-size: 13px;
	font-weight: 400;
	color: #666666;
	margin-bottom: 20px;
}
/* ********************* our happy clients ends ******************************  */


/* ********************* contact us starts ******************************  */

.contactus {
	width: 100%;
	padding: 80px 0;
	position: relative;
}

	.contactus::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: -1;
		background: linear-gradient(to right, #1e5799 0%, #3ccdbb 0%, #16c9f6 100%);
	}

.form-button button {
	border: 1px solid #50c1d0;
	border-radius: 100px;
	margin: 0 5px;
	padding: 12px 35px;
	outline: none;
	color: #50d1c0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
	background: transparent;
}

form:hover .form-button button {
	background: #fff;
	color: #50d1c0;
	box-shadow: 0 0 20px 0 rgba(0,0,0,0.3);
}

::placeholder {
	font-size: 0.85rem;
}

.product {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-gap: 1.85em;
}

.doubleRows {
	grid-row: span 2;
}

.orderInputs p {
	margin-top: 0.75rem;
	margin-bottom: 0.25rem;
}

.product img {
	height: 100%;
	margin: 1em;
	border-radius: 8px;
}

.philosophySection img {
	border-radius: 8px;
}

.buyProductContentLeft img {
	width: 100%;
	margin: 0 1.5em 0 0;
}

.sendBtn {
	background-color: #f4fbff !important;
	color: #1c355e !important;
}
.white p.textHighlight {
	border-radius: 8px;
	padding: 1em !important;
	margin-bottom: 1em;
	color: #1c355e !important;
	font-size: 1.2em !important;
	line-height: 1.8 !important;
	padding: 1.25em !important;
}
.centerHero{
	margin-inline:0 auto;
	text-align:center;
	width:300px !important;
}

.orderBtn {
	border: none;
	cursor: pointer;
	background: rgba(136,190,231,1);
	background: -moz-linear-gradient(left, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(136,190,231,1)), color-stop(100%, rgba(52,119,177,1)));
	background: -webkit-linear-gradient(left, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
	background: -o-linear-gradient(left, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
	background: -ms-linear-gradient(left, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
	background: linear-gradient(to right, rgba(136,190,231,1) 0%, rgba(52,119,177,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88bee7', endColorstr='#3477b1', GradientType=1 );
	border-radius: 3px;
	color: #fff;
	margin-bottom: 2em;
	margin-left: -2em;
	padding: 0.75em 0.95em 0.75em;
	box-shadow: 0px 4px 4px rgba(0,0,0,0.2);
	text-shadow: none;
	text-decoration: none;
	display: block;
	font-weight: bold;
	font-size: 1.4em;
	width: 300px;
	text-transform: uppercase;
}
.price {
	background-color: blanchedalmond;
	max-width: 130px;
	border-radius: 4px;
	margin: 0 !important;
	padding: 0.5em 1em 0.35em !important;
}

.buyProduct {
	margin-top: 2rem;
	text-align: left;
	margin-bottom: 0;
	border: solid 1px #f1f1f1;
	border-radius: 8px;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 19px 40px -20px;
	background: rgb(249,249,249);
	background: -moz-linear-gradient(140deg, rgba(249,249,249,1) 0%, rgba(228,251,255,1) 100%);
	background: -webkit-linear-gradient(140deg, rgba(249,249,249,1) 0%, rgba(228,251,255,1) 100%);
	background: linear-gradient(140deg, rgba(249,249,249,1) 0%, rgba(228,251,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f9f9f9",endColorstr="#e4fbff",GradientType=1);
	padding: 3em 5em 4em 3em;
	display: grid;
	grid-template-columns: 40% 60%;
	grid-gap: 3em;
}

.myBasket, .myOrder, .successOrder {
	margin-top: 0;
	text-align: left;
	margin-bottom: 3em;
	border: solid 1px #f1f1f1;
	border-radius: 8px;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 20px -10px;
	background: rgb(249,249,249);
	background: -moz-linear-gradient(140deg, rgba(249,249,249,1) 0%, rgba(228,251,255,1) 100%);
	background: -webkit-linear-gradient(140deg, rgba(249,249,249,1) 0%, rgba(228,251,255,1) 100%);
	background: linear-gradient(140deg, rgba(249,249,249,1) 0%, rgba(228,251,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f9f9f9",endColorstr="#e4fbff",GradientType=1);
	padding: 2em 5em 5em 3em;
}

/* ********************* contact us ends ******************************  */
/* ********************* newsletter starts ****************************** */
.newsletter {
	width: 100%;
	height: auto;
	margin: 80px 0;
}

.newsletter-input {
	border-radius: 100px 0px 0px 100px !important;
	min-width: 150px;
	min-height: 45px;
}

.genderSelect {
	cursor: pointer;
	border-radius: 5px; /*
    max-width: 190px;
    
    -webkit-box-shadow: 0px 0px 3px 3px rgba(230,230,230,0.16);
    -moz-box-shadow: 0px 0px 3px 3px rgba(230,230,230,0.16);
    box-shadow: 0px 0px 3px 3px rgba(230,230,230,0.16);*/
	background-size: 18px;
	background-position: left center;
	background-repeat: no-repeat;
	text-align: left;
}


div.typeSelectBox.active {
	padding: 7px 23px 7px 24px;
	color: #009edc;
	border-color: #009edc;
	border-right: solid 1px !important;
	border-right-color: #009edc !important;
	background-color: #ceecf7;
}



.typeSelectBox.typeSelectBox:nth-of-type(1) {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	border-right: 0;
}

.typeSelectBox.typeSelectBox:last-of-type {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border-right: solid 1px #aaa;
}

div.typeSelectBox {
	background-color: #fff;
	font-size: 1rem;
	clear: both;
	cursor: pointer;
	max-width: 300px;
	padding: 8px 24px;
	display: inline;
	border-top: solid 1px #aaa;
	border-bottom: solid 1px #aaa;
	border-left: solid 1px #aaa;
	-webkit-box-shadow: 0px 0px 3px 3px rgba(230,230,230,0.26);
	-moz-box-shadow: 0px 0px 3px 3px rgba(230,230,230,0.26);
	box-shadow: 0px 0px 3px 3px rgba(230,230,230,0.26);
	background-size: 18px;
	background-position: left center;
	background-repeat: no-repeat;
	text-align: center;
}

	div.typeSelectBox:hover {
		border-color: #ccc;
	}

	div.typeSelectBox.active {
		padding: 8px 23px 8px 24px;
		border-color: var(--clr-primary);
		border-right: solid 1px !important;
		border-right-color: var(--clr-primary) !important;
	}


.orderInputs {
	display: grid;
	grid-template-columns: 40% 60%;
	grid-gap: 1em;
}

.input-group-text {
	color: #fff !important;
	background: #5bc0de !important;
	border-radius: 0 100px 100px 0 !important;
	min-width: 130px;
	min-height: 45px;
}

	.input-group-text:hover {
		cursor: pointer;
		opacity: 0.8;
	}

/* *********************  Buy Product ****************************** */
a {
	color: #4e80b6 !important;
}
a:hover {
	color: unset;
	text-decoration: none !important;
}

.addToBasketBox {
	display:grid;
	grid-template-columns:75px minmax(auto, 250px);
}

.addToBasket {
	display: grid;
	grid-template-columns: 75% 5% 20%;
	grid-gap: 5px;
	padding: 0 1em;
	font-size: 1em;
	margin-bottom: 0;
	text-decoration: none;
	border: solid 1px #49b7f5;
	background-color: #d6eeff;
	margin-right: 3px;
	border-radius: 8px;
}

.amountText, .amount {
	display: inline-block;
	margin-top: 6px;
}

.amount {
	color: #4e80b6 !important;
	font-weight:bold;
}

.amountBreaker {
	display: inline-block;
	height: 100%;
	margin-top: 0;
	border-left: solid 1px #49b7f5;
}

.productNumberField {
	max-width: 60px;
	height: 40px;
	border-radius: 6px;
}


input.fullInput {
	width: 100%;
}

input.hugeInput {
	width: 350px;
}

input.largeInput {
	width: 300px;
}

input.middleInput {
	width: 160px;
}

input.mediumInput {
	width: 200px;
}

input.smallerInput {
	width: 70px;
}

input.smallestInput {
	width: 35px;
}

input.microInput {
	width: 30px;
}

/* *********************  newsletter ends ****************************** */
/* *********************  footer starts ****************************** */
.footersection {
	width: 100%;
	height: auto;
	padding: 70px 0 20px 0;
	background: #00abff;
	position: relative;
}

	.footersection p {
		color: #fff;
	}

.footer-navlinks {
	text-align: center;
}

.footersection li a {
	font-size: 0.9rem;
	line-height: 1.6;
	font-weight: 400;
	color: #fff;
	text-transform: capitalize;
}

.footersection h3 {
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 25px;
	font-size: 1.2rem !important;
	font-weight: 600;
	text-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

#myBtn {
	/* display: none; */
	position: fixed;
	bottom: 20px;
	right: 40px;
	z-index: 10;
	border: none;
	color: #fff;
	background: #00abff;
	padding: 10px;
	border-radius: 10px;
}

.closerCell{
	display:grid;
	grid-template-columns:80px auto;
	grid-gap:1em;
}

#myBtn:hover {
	background: #606060;
}
/* *********************  footer ends ****************************** */


/* ****************** Media Queries ********************** */
@media (max-width: 768px) {
	.nav-item {
		text-align: center !important;
	}

	.mobile-break {
		display: inline;
	}

	.desktop-break {
		display: none;
	}

	.header-buttons {
		display: grid;
	}

		.header-buttons a {
			margin: 0 20px 15px 20px;
		}

	.twospan {
		grid-column: span 1;
	}

	.header-section {
		display: grid;
		grid-template-columns: 100%;
	}

	.basketItem {
		display: grid;
		grid-template-columns: 100%;
		grid-gap: 1em;
		background-color: #d6eeff;
		padding: 1em;
		border-radius: 10px;
		margin-bottom: 1em;
	}

	.shoppingCosts, .totalCosts {
		display: grid;
		grid-template-columns: 100%;
		grid-gap: 1em;
		background-color: #d6eeff;
		padding: 1em;
		border-radius: 10px;
		margin-bottom: 1em;
	}

	.right-div {
		grid-row: 1;
		padding-top: 10vh;
		grid-column: 1;
	}

	.left-div {
		grid-column: 1;
		grid-row: 1;
	}

	h1 {
		color: #fff;
		font-size: 3rem !important;
		letter-spacing: 1px;
	}

	.pricing, .happyclients, .contactus {
		height: auto;
		margin-top: 50px;
	}

	.card-second {
		transform: translateY(0px);
		margin: 30px 0;
	}

	.contactus p {
		padding: 0 50px;
	}

	.footer-navlinks {
		text-align: left;
	}

	.footer-div {
		margin: 30px 0;
	}

	.right-div h1,
	.right-div p {
		padding: 0 10px;
	}

	.buyProduct {
		grid-template-columns: 100%;
		grid-template-rows: auto auto auto auto;
		justify-content: center;
		justify-items: center;
	}
	.myBasket, .myOrder, .successOrder {
		grid-template-columns: 100%;
		grid-template-rows: auto auto auto auto;
		justify-content: center;
		justify-items: center;
	}

		.hero, .serviceoffers img, .buyProductArea img {
			max-width: 100%;
		}

	.philosophyContent, .product {
		display: grid;
		grid-template-columns: 100%;
		grid-gap: 1em;
	}

	.white p {
		padding: 1em !important;
	}

	.product img {
		width: 100%;
		margin: 0;
	}

	.buyProduct {
		margin-top: 2rem;
		padding: 1em 1.5em 2em 1.5em;
		grid-gap: 1em;
	}
	.buyProductContentLeft img {
		width: 100%;
		margin: 0;
	}

	.addToBasket {
		display: grid;
		grid-template-columns: 75% 2% 28%;
		grid-gap: 5px;
		padding: 0 0.5em 0 0.9em;
		font-size: 0.9em;
		margin-bottom: 0;
	}
	.amountText, .amount {
		display: inline-block;
		margin-top: 8px;
	}

	.buyProductContentRight {
		padding-right: 1em;
	}

	.basketItem {
		display: grid;
		grid-template-columns: 100%;
		grid-gap: 1em;
		background-color: #d6eeff;
		padding: 1em;
		border-radius: 10px;
		margin-bottom: 1em;
	}
	.myBasket, .myOrder, .successOrder {
		padding: 1em 1.5em 4em 1.5em;
		grid-gap: 1em;
	}
	.finishOrder, .saveOrder {
		float: left;
	}
	.actionCell{
		display:grid;

	}
	.basketItemImg {
		margin: 0 auto;
	}

	.orderInputs {
		display: grid;
		grid-template-columns: 100%;
		grid-gap: 1em;
	}

	.closerCell {
		display: grid;
		grid-template-columns: 20% 80%;
		grid-gap: 1em;
	}
	.largeInput{
		max-width:100%;
	}
}