* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

}

a {
    text-decoration: none;
    color: #ffffff;
}

ul  {
    list-style: none;
}
.container {
    max-width: 1170px;
    background-color: #dae3e3;
    margin: auto;

}



.nav ul li:hover,
.nav ul li.active {
    color: black;
}

.row #nav-check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.nav-toggler {
    height: 34px;
    width: 44px;
    background-color: #ffffff;
    border-radius: 4px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.nav-toggler span {
    display: block;
    height: 2px;
    width: 20px;
    background-color: black;
    position: relative;
}

.nav-toggler span::before,
.nav-toggler span::after {
    content:'';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    left: 0;
}

.nav-toggler span::before {
    top: -6px;
}

.nav-toggler span::after {
    top: 6px;

}


.row {
    display: flex;
    flex-wrap: wrap;
}




.align-items-center {
    align-items: center;

}

.justify-content-between {
    justify-content: center;
}

.nav ul li {
    display: inline-block;
    margin-left: 40px;

}


header {
    background-color: #dae3e3;
    padding: 12px 0;
    position: relative;
}

@media(max-width: 991px) {
    .nav-toggler {
        display: flex;
    }
    .nav {
        position: absolute;
        left: 0;
        top: 100%;
        width: 100%;
        background-color: #dae3e3;
        border-top: 1px solid rgba(255,255,255,0.2);
        opacity: 0;
        visibility: hidden;
    }

    .nav ul li {
        display: block;
        margin: 0;
    }

    .row {
        background-color: #dae3e3;
    }

   .row #nav-check:checked ~ .nav {
        opacity: 1;
        visibility: visible;
    }

    .row #nav-check:focus ~ .nav-toggler {
        box-shadow: 0 0 15px #000000;
    }

    .row #nav-check:checked ~ .nav-toggler span {
        background-color: transparent;
    }

    .row #nav-check:checked ~ .nav-toggler span::before {
        top: 0;
        transform: rotate(-45deg);
    }

    .row #nav-check:checked ~ .nav-toggler span::after {
        top: 0;
        transform: rotate(45deg);
    }

}


body {
	font-family: system-ui;
	font-size: 2.25rem;
	display: grid;
	background: white;
	margin: 0px;
	min-block-size: 100dvh;
    font-weight: 200;


}

.back 	{
	background: linear-gradient(to bottom, #ffffff 0%, #a5d9d9 100%);
}

.back1 {
	background: url(bed_3.jpg);
	height: 20rem;
	background-position: center;
	
}


.center 	{
	margin-top: 10rem;
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 65%;
}

.brands img {
	display: block;
	margin: 15rem auto;
	width: 10rem;
	padding: 25px;
}

.brands {
	display: flex;
	justify-content: center;

}




.grid_container	{
	font-size: 18px;
	color: darkslategray;
	display: grid;
	grid-template-columns: 
		repeat(auto-fit, minmax(40rem, 1fr));
	text-align: center;
	background: linear-gradient(to bottom, #ffffff 0%, #a5d9d9 100%);

}

.grid_container img {
	width: 45%;
	height: auto;
	margin-top: 2.25rem;
	border-radius: 30px;
}

.grid-item	{
	border: 1px solid darkslategray;
	margin: 1rem;
	padding: 2rem;
	border-radius: 10px;
	background: linear-gradient(to bottom, #edf7f7 0%, #c8e3e3 100%);
	box-shadow: 0.25rem 0.5rem rgb(0 0 0 / .1);

}

.treatment	{
	margin-top: 1rem;
	padding: 3rem;
	font-weight: 200;
	border-radius: 20px;
	font-size: 0.75em;
	opacity: 0.8;
	transition: opacity 0.2s;
	transition: font-size 0.3s;
	background: linear-gradient(to bottom, #ffffff 0%, #c8e3e3 100%);
}

.treatment:hover {
	opacity: 1;
	font-size: 0.775em;
}

.treatment:nth-child(even) {
	background: linear-gradient(to bottom, #ffffff 0%, #e3e1e1 100%);
}

.grid {
	background-image: url(bed_3.jpg);
	background-position: center;
	padding: 10rem;
}

.about1	{
	background-color: black;
	border-radius: 30px;
	margin: 3rem;

	
}

.about2	{

	background-image: url(bed_3.jpg);
	background-position: right;
	font-weight: 200;
	margin: 3rem;
	border-radius: 30px;
	padding: 3rem;
}



.about2 span	{
	color: darkslategray;
	font-size: 0.75rem;
}

.about2 p	{
	color: darkslategray;
	font-size: 1.25rem;
	text-align: left;
	padding: 1rem;

}


.contact1	{
	background-image: url(products2.jpg);
	background-position: center;
	object-fit: contain;
	margin: 4rem;
	border-radius: 30px;
	font-weight: 200;
	padding: 3em;
	color: white;

}

.border {
	background: rgba(0,0,0, 0.5);
  	transition: background 1s;
}

.border:hover {
  background: rgba(0,0,0, 1):
}


ion-icon  {
	font-size: 5rem;
	color: white;
	transition: color 0.4s;
}

ion-icon:hover {
	color: #2df4f7;
}


.contact2 	{
	background-image: url(bed_3.jpg);
	margin: 4rem;
	border-radius: 30px;
	font-weight: 200;
	padding: 3em;
	background-position: center;
}

.transparent {
	margin: 1rem;
	padding: 2rem;
	border-radius: 30px;
	background: #ffffff;
	opacity: 0.8;
	color: black;
	transition: opacity 1s;
}

.transparent:hover {
	opacity: 1;
}

.border {
	padding: 2 rem;
	margin: 2rem;
	border: 1px solid white;
	border-radius: 30px;
}


.gateshead {
	text-align: left;
	line-height: 90%;
}


.gateshead span {
	color: #2c9e95;
	font-weight: 750;
	font-size: 2em;
}

button.booking1 {
	background-color: #2c9e95;
	border: none;
	color: white;
	font-size: 16px;
	padding: 15px 32px;
	float: left;
	margin: 4px 2px;
	border-radius: 5px;	
	transition: background-color 1s;
}

button.booking1:hover {
	background-color: black;
	color: white;
}

.blagdon {
	text-align: left;
	line-height: 90%;
}


.blagdon span {
	color: #7d706c;
	font-weight: 750;
	font-size: 2em;
}



nav {
	background-color: #dae3e3;
}





nav a 	{
	color: black;
	opacity: 1;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 200;
	position: relative;
	font-size: 1em;
	
}
nav a:hover,
nav a:focus-visable	{
	opacity: 1;
}

.nav ul li a:hover {
	color: white;

}

@keyframes transitionIn {
	from {
		opacity: 0;
		transform: rotateX(-10deg);
		
	}

	to {
		opacity: 1;
		transform: rotateX(0);

		
	}
}

.center {
	animation: transitionIn 2s;
}

.portrait  {
	animation: transitionIn 3s;
}

.contact1 {
	animation: transitionIn 2s;
}