@charset "utf-8";
/* CSS Document */

/*
Framework by Andy Shearouse
*/
html, body{
	margin:0px !important;
	padding:0px !important;
}

img{
	max-width:100% !important;	
}

.container{
	max-width:2560px;
	width:100%;
	margin:0 auto;
	position:relative;
	font-family: "Open Sans", sans-serif;
}

.header{
    width: 100%;
}
.nav-container{
    display:grid;
    -ms-grid-columns:1fr 10fr;
	grid-template-columns:1fr 10fr;
	margin: 0.8%;
	gap:0.8vw
}
.nav-list{
    display:grid;
    -ms-grid-columns:2fr 3fr 3fr 2fr 2fr 2fr;
	grid-template-columns: 2fr 3fr 3fr 2fr 2fr 2fr;
    place-items:center  ;
    text-align: center;
}
.nav-list a {
  color: #989898;
  text-decoration: none;
}

.nav-list a.active {
  color: #338176;
  font-weight: bold;
  text-decoration: none;
}
#about-list{
    background-color:#DDDDDD;
    width:1.2vw;
}
.about{
    color:white;
}


/*#home-link{*/
/*    color:#338176;*/
/*}*/
/*#about-link{*/
/*    color: #989898;*/
/*}*/
/*#therapy-link{*/
/*    color: #989898;*/
/*}*/
/*#skin-link{*/
/*    color: #989898;*/
/*}*/
/*#gift-link{*/
/*    color: #989898;*/
/*}*/
/*#contact-link{*/
/*    color: #989898;*/
/*}*/
.banner-one{
    /*background-image:url(images/spa-banner1.png);*/
    /*background-size:cover;*/
    position: relative;
    margin-bottom: 28.1vw;
}
img.big-ban {
    min-height: 600px;
}
.boxes-container{
    position: absolute;
    top:90%;
    bottom 50%;
    background-color: rgba(0,0,0,0);
    color: white;
    padding-left: 10%;
    padding-right: 10%;
    font-size:1.2vw;
    display:grid;
    -ms-grid-columns:1fr 1fr;
	grid-template-columns:1fr 1fr;
	gap:12vw;
    plce-items:center  
}
.three-boxes{
    background-color: white;
    color:black;
    border: 0.781vw solid #338176;
    margin: 6%
    place-items: center;
    text-align: center;
    padding-bottom: 10%;
    padding-left: 3%;
    padding-right: 3%;
}
.three-boxes-header{
    color:#3e9b8e;
    font-weight:lighter;
    
}
.three-boxes-para{
    color: #989898;
}
.three-box-link{
    text-decoration: none;
    background-color: #3e9b8e;
    color:white;
    padding: 1%;
    transition: all 0.3s;
    cursor: pointer;
}


.three-box-link:hover{
    background: #29675f;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(62, 155, 142, 0.4);
}

.water-background{
    background-image: url(images/water-droplet.png);
    /*background-size: cover;*/
    background-size: cover;
}
.banner-mini{
    /*background-image: url(images/mini-banner.png);*/
    position: absolute;
    top: 15%;
    bottom: 50%;
    left: 25%;
    right: 25%;
    color: white;
    font-size: clamp(0.7rem, 1vw, 1.3vw);
    place-items: center;
    text-align: center;
    
}
#mini{
    /*object-fit: cover;*/
    width: 100%;
    min-height:300px;
}
.mini-container{
    position:relative;
}

.testimonial-box{
    display:grid;
    -ms-grid-columns:1fr 1fr;
	grid-template-columns:1fr 1fr;
	padding:5%;
	gap:4vw;
	place-items: center;
}
.testimonial-img{
    /*object-fit: cover;*/
    /*width: 100%;*/
}
.para{
    font-size: clamp(0.7rem, 1.3vw, 1.4vw);
    color:#989898;
}
.para-mini{
    font-size: clamp(0.7rem, 1.3vw, 1.4vw);
    color:#989898;
    padding-right:20%;
}
#para2{
    /*padding-right:20%;*/
    
}
#gift{
    padding-right: 20%;
}
.gift-box{
    display:grid;
    -ms-grid-columns:2fr 1fr;
	grid-template-columns:2fr 1fr;
	gap:4vw;
	padding-left:5%;
	place-items: center;
	padding-bottom:10%;
}
#shop-box{
    display:grid;
    -ms-grid-columns: 1fr;
	grid-template-columns:1fr;
}
#text-center{
    text-align: center;
}
#text-center2{
    text-align: center;
}
#text-center3{
    text-align: center;
}
#shops {
    background-color: #3e9b8e;
    padding:2%;
    border-radius: 15%;
    /* justify-content: center; */
    text-align: center;
    /* margin: 0% 35%; */
    margin-left: 15%;
    margin-right: 55%;
    font-size: clamp(1rem, 2.7vw, 4vw);
    text-decoration: none;
    color: white;
    font-weight: bold;
    transition: all 0.3s;
    cursor: pointer;
}
#shops:hover{
    background: #29675f;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(62, 155, 142, 0.4);
}
.big-header {
    color: #3e9b8e;
    font-weight: normal;
    font-size: clamp(1.4rem, 2.8vw, 3.1vw);
    /*font-size: clamp(1.4rem, 3.8vw, 4vw);*/
    text-align: center;
}
.footer{
    display:grid;
    -ms-grid-columns:3fr 1fr;
	grid-template-columns:3fr 1fr;
	background-color:#3e9b8e;
	color:white;
	font-size: clamp(0.8rem, 1.2vw, 2.5vw);
}
.sub-footer{
    display: grid;
    -ms-grid-columns: 2fr 8fr;
    grid-template-columns: 2fr 8fr;
    /* justify-items: left; */
    padding: 2% 0%;
    gap:1.2vw

}
.sub-footer ul{
    list-style-type: none;
    place-self: center;
    justify-self: left;
    /*padding-: 2%;*/
}
#img-icon{
    place-self:center;
}
.augstana{
    justify-self:end;
    align-self: self-end;
    margin:2%;
}


/*Use the following for top drop-down nav
Change the background-color in #nav to change the color of the navigation bar
Change the background-color in #nav ul li ul to change the background color of the dropdown menus
These values do also need to be changed further down, in the 600px, 400px, and 300px wide sections 
*/
/* -------------------- Start Navigation -------------------- */
#nav{
	width: 100%;
	z-index:10;
	position:relative;
	float:left;
	font-size:16px;
	margin-bottom:15px;
}

#nav > a{
	display: none;
}

#nav li{
	position: relative;
	list-style-position:inside;
	list-style-type:none;
	justify-self: left;
}
#nav li a{
	display: block;
	text-decoration:none;
	font-size: clamp(0.8rem, 1.2vw, 2.5vw);
}

/* first level */

#nav > ul{
	text-align:center;
	padding-left:0px !important;
	margin-left:0px !important;
}
#nav > ul > li{
	margin:0px 15px;
	padding:4px 8px;
	height: 100%;
	display:inline-block;
}
#nav > ul > li > a{
	height: 100%;
	text-align: center;
	/*margin-top: 15%;*/
}
#nav > ul > li:not( :last-child ) > a{
	
}

#nav > ul > li:hover > a{
    
}
#nav > ul:not( :hover ) > li.active > a{
	
}

	/* second level */

#nav li ul{
	background-color:#ccc;
	display: none;
	position: absolute;
	top: 100%;
	margin-left:0 !important;
	padding-left:0 !important;
	width:auto;
	text-align:left;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
}
#nav li:hover ul{
	display: block;
	left: 0;
}
#nav li:not( :first-child ):hover ul{
	left: -1px;
	background-color:#338176;
	

}
#nav li ul a{
	color:white;
	padding: 0.75em; /* 15 (20) */
	background-color:#338176;
	transition: all 0.2s;
    cursor: pointer;

}
#nav li ul li a:hover{
    background: #29675f;
}
#nav li ul:not( :hover ) li.active a
{
    
}
/* -------------------- End Navigation -------------------- */

.content{
	width:100%;
	display:inline-block;
	padding-bottom:20px;
}



.footer{
	
}

.no-margin{
	margin:0px !important;
}

.no-padding{
	padding:0px !important;	
}

.no-bold{
	font-weight:normal !important;	
}

.no-border{
	border:none !important;
}

.center{
	text-align:center;	
}

.block{
	display:block !important;	
}

@media only screen and (max-width:1200px){
	
}

@media only screen and (max-width:960px){	
	.grid-four-columns{
		-ms-grid-columns:1fr;
		grid-template-columns:1fr 1fr;
	}
}

@media only screen and (max-width:768px){
	/* -------------------- Start Navigation -------------------- */
	a.menu-icon {
        justify-self: left;
        place-self: center;
        margin-right: 80%;
    }
	#nav{
        /*position: relative;*/
        display: inline-block;
        place-items: self-end;
    }
    .menu-icon{
        justify-self:left;
    }
    #nav img{
        /*vertical-align:middle;*/
        padding-left: 3%;
    }
	#nav > a{
	}
	
	#nav:not( :target ) > a:first-of-type,
	#nav:target > a:last-of-type{
		display: inline-block;
		/*width:100%;*/
		/*text-align:center;*/
		color:#000;
		font-size:20px;
		padding:5px 0px;
		text-decoration:none;
		margin: 2%;
	}
	
	#nav a{
		font-size:18px;	
	}
	#first-logo{
	    width:60%;
	}
 
    /* first level */
 
    #nav > div > ul{
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
		background-color:white;
		margin-top:8px !important;
		padding-bottom:10px;
		/*margin: 0% 0%;*/
    }
	#nav:target > div > ul{
		display: block;
		padding: 0%;
	}
	#nav > div > ul > li{
		width: 100%;
		float: none;
		margin:0px !important;
		padding:4px 0px;
	}

    /* second level */
 
    #nav li ul{
        position: static;
		width:98%;
		margin:0 !important;
		text-align:center;
		padding:0 !important;
    }
	#nav li ul a{
		padding:0.5em 0;
		margin:0.25em 0;
	}
	
	
	.nav-container{
        display:inline-block;
        float:right;
    	margin-right: 0%;
    	text-align: end;
    	padding-right:0.5%;
    }

	/*End Navigation*/
	
	
	
	.footer{
		text-align:center;
	}
	
	
	
}

@media only screen and (max-width:768px){
    #nav li{
        justify-self: normal;
    }
    .banner-one{
        /*background-image:url(images/spa-banner1.png);*/
        /*background-size:cover;*/
        position: relative;
        margin-bottom: 0vw
    }
    img.big-ban {
        min-height: 0;
    }
    .boxes-container{
        position: static; 
        top: 90%;
        background-color: rgba(0, 0, 0, 0);
        color: white;
        /* padding-left: 10%; */
        /* padding-right: 10%; */
        font-size: clamp(0.7rem, 1.5vw, 1.4vw);
        display: grid;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 12vw;
        plce-items: center; 
        margin: 12vw 0vw;
    }
    .three-boxes{
        padding-bottom: 02%;
        padding-left: 3%;
        padding-right: 3%;
    }
    .three-boxes-header{
        color:#3e9b8e;
        font-weight:lighter;
    }
    .three-boxes-para{
        color: #989898;
    }
    .three-box-link{
        text-decoration: none;
        background-color: #3e9b8e;
        color:white;
        
    }
    
    
    
    .banner-mini{
        /*background-image: url(images/mini-banner.png);*/
        position: absolute;
        top: 15%;
        bottom: 50%;
        left: 25%;
        right: 25%;
        color: white;
        font-size: clamp(0.62rem, 1vw, 1.3vw);
        place-items: center;
        text-align: center;
        
    }
    #mini{
        /*object-fit: cover;*/
        width: 100%;
        min-height:450px;
    }
    .mini-container{
        position:relative;
    }

    
    
    
    
    
    .testimonial-box{
        display:grid;
        -ms-grid-columns:1fr;
    	grid-template-columns:1fr;
    	padding:5%;
    	gap:4vw;
    	place-items: center;
    }
    .testimonial-img{
        /*object-fit: cover;*/
        /*width: 100%;*/
    }
    .para{
        font-size: clamp(0.8rem, 2vw, 2.4vw);
        color:#989898;
    }
    .para-mini{
        padding:0%;
        font-size: clamp(0.8rem, 2vw, 2.4vw);
        text-align: center;
    }
    #para2{
        padding-right:0%;
        
    }
    #gift{
        padding-right: 0%;
    }
    .gift-box{
        display:grid;
        -ms-grid-columns:1fr;
    	grid-template-columns:1fr;
    	gap:4vw;
    	padding-left:5%;
    	place-items: center;
    	padding-bottom:10%;
    }
    #shop-box{
        display:grid;
        -ms-grid-columns: 1fr;
    	grid-template-columns:1fr;
    }
    #shops {
        background-color: #3e9b8e;
        padding: 2% 1%;
        border-radius: 15%;
        /* justify-content: center; */
        text-align: center;
        /* margin: 0% 35%; */
        margin-left: 42%;
        margin-right: 42%;
        font-size: clamp(1rem, 2.7vw, 4vw);
        text-decoration: none;
        color: white;
        font-weight: bold;
    }
    .big-header {
        color: #3e9b8e;
        font-weight: normal;
        font-size: clamp(1.4rem, 2.8vw, 3.1vw);
        /*font-size: clamp(1.4rem, 3.8vw, 4vw);*/
        text-align: center;
    }
    
    
    .footer{
        display:grid;
        -ms-grid-columns:1fr;
    	grid-template-columns:1fr;
    	background-color:#3e9b8e;
    	color:white;
    	place-items:center;
    	padding:2%;
    }
    .sub-footer{
        display:grid;
        -ms-grid-columns:1fr;
    	grid-template-columns:1fr;
    	/*justify-items:left;*/
    	padding:0%;
    
    }
    .sub-footer ul{
        list-style-type: none;
        padding:0%;
        place-self: center;
    }
    .augstana{
        justify-self: center;
        /* align-self: anchor-center; */
        margin: 0%;
        text-al: start;
    }
    
    #img-icon{
        width:35%;
    }
    
    
    
	
}

@media only screen and (max-width:480px){
	
}



/*Confirm CSS*/
#big-banner{
    margin:0%;
}
#box-container-banner{
    margin:0%;
}
.second-main{
    background-image: url(images/water-droplet.png);
    background-size: cover;

}
.sub-second-main{
    display:grid;
    -ms-grid-columns:1fr 8fr;
	grid-template-columns:1fr 18fr;
	gap:1.2vw
}
h1{
    color:#338176;
}
.second-main{
    background-image: url(images/water-droplet.png);
    background-size: cover;
    padding:2%;
}
.title {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom:2%;
    padding-top:5%;
    font-size:clamp(2.4rem, 2.7vw, 2.8vw);
    

}
.second-main p {
    font-size: 1rem;
    color: #555;
    margin: 15px 0;
    font-size:clamp(1.1rem, 1.4vw, 1.6vw);
    text-align: center;
    line-height: 150%;
}





/*Contact CSS*/

#big-banner{
    margin:0%;
}
#box-container-banner{
    margin:0%;
}

.sub-second-main{
    display:grid;
    -ms-grid-columns:1fr 8fr;
	grid-template-columns:1fr 18fr;
	gap:1.2vw
}

.h2-sub{
    color:#338176;
}
.second-main2{
    background-image: url(images/water-droplet.png);
    background-size: cover;
    padding:2%;
}
.title {
    color:#338176;
    text-align: center;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom:2%;
    padding-top:5%;
    font-size:clamp(2.4rem, 2.7vw, 2.8vw);
    

}
.second-main .contact-list {
    color: #555;
    margin: 15px 0;
    font-size:clamp(1.1rem, 1.4vw, 1.6vw);
    text-align: center;
    line-height: 150%;

}
.contact-list{
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    /*-webkit-backdrop-filter: blur(10px);*/
    /*border: 3px solid  #338176;*/
    margin: 1.2rem;
    /*box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);*/
    padding:3%;
    font-size: clamp(1.1rem, 1.2vw, 1.3vw);
    display:grid;
    grid-template-columns:1fr 1fr;
    list-style-type: none;
    row-gap:3.2vw
    /*place-items:center;*/
}
.contact-two-grid{
    display:grid;
    grid-template-columns:1fr;
    /*gap: 1.5vw;*/
    place-items:center;
    
}
.images{
    /*justify-self:right;*/
    place-self:center;
}
.lists-con{
    /*justify-self:left;*/
    align-self: center;
}
.socials {
    place-self: center;
}
.spa-hours{
    place-items:center;
    font-size:clamp(1.1rem, 1.4vw, 1.6vw);
    display:grid;
    grid-template-columns:3fr 1fr;
    color: #555;
    column-gap:5%;
}
.days{
    justify-self:left;
}
.hours{
    justify-self:left;
}
.grid-box-date{
    place-items:center;
}

@media only screen and (max-width:502px){
    .contact-list{
        display:grid;
        grid-template-columns:1fr;
    }
    .spa-hours{
        font-size:clamp(2.8vw, 3.5vw, 3.6vw);
    }
}




/*Gift CSS*/



.gift-h1{
    color:#338176;
    text-align: center;
}
.gift-second-main{
    background-image: url(images/water-droplet.png);
    background-size: cover;
    padding:2%;
}
#gift-card-img{
    place-self:center;
}

.gift-second-main p {
    font-size: 1rem;
    color: #555;
    margin: 15px 0;
    font-size:clamp(1.1rem, 1.4vw, 1.6vw);
    text-align: center;
    line-height: 150%;

}
.gift-ul{
    list-style: none;
    padding: 0%;
    text-align:center;
    font-size: clamp(1.1rem, 1.2vw, 1.3vw);
    color: #555;
}


/*Green Lights CSS*/
.green-sub-second-main{
    display:grid;
    -ms-grid-columns:1fr 18fr 18fr;
	grid-template-columns:1fr 18fr 18fr;
	gap:1vw
}
.green-second-main{
    background-image: url(images/water-droplet.png);
    background-size: cover;

}
.green-title {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom:2%;
    padding-top:5%;
    color:#338176;
}
.vertical-text-container {
    /* position: absolute; */
    /* top: 50%; */
    left: 0;
    /* height: 100vh; */
    /* padding-top: 15px; */
    place-self: center;
    /*align-self: center;*/
}
.green{
    color:#8A9A5B;
    font-weight:bold;
}

#vertical-text {
    writing-mode: vertical-rl; 
    transform: rotate(180deg);
    font-size: 1rem;
    color: #333;
    font-weight: 400;
    text-align: center;
    max-height: 100%;
    font-size: clamp(0.8rem, 1.3vw, 1.4vw);

}
.main-text{
    font-family: 'Open Sans', sans-serif;
    color: #333;
    line-height: 1.6;
    padding-left:2%;
}

.green-second-main p {
    /*font-size: 1rem;*/
    color: #555;
    padding: 0 2%;
    margin: 15px 0;
    font-size: clamp(1rem, 1.3vw, 1.4vw);
}


#lists{
    margin: 20px 0;
    padding-left: 6%;
    font-size: clamp(1rem, 1.2vw, 1.4vw);
    color: #555;
    list-style: square;
}

#lists li{
    margin-bottom: 12px;
    line-height: 1.5;
}
.image{
    width:100%;
}
@media only screen and (max-width:769px){
	.green-sub-second-main{
        display:grid;
        -ms-grid-columns:1fr;
    	grid-template-columns:1fr;
    	gap:1.2vw
    }
    #vertical-text {
        writing-mode: horizontal-tb; 
        transform: none;
        padding:0%;
        font-size: 1rem;
    }
}




/*Massage Therapy CSS*/

.massage-second-main{
    background-image: url(images/water-droplet.png);
    background-size: cover;
    padding: 5% 0%;
}
.massage-title{
    color:#338176;
    text-align:center;
}
.big-three-grid{
    display:-ms-grid;
	display:grid;
	-ms-grid-columns:1fr 1fr;
	grid-template-columns:1fr 1fr;
	gap: 1.2vw;
    padding: 2% 1%; 
    
}
.card-three-box{
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 3px solid  #338176;
    margin: 1.2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    padding:3%;
    font-size: clamp(1.1rem, 1.2vw, 1.3vw);
    transition: all 0.3s;
    /*cursor: pointer;*/
}

.card-three-box:hover{
    background: #338176;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(62, 155, 142, 0.4);
    color:white;
}
.card-three-box:hover h1 {
    color: white;
    text-decoration: none;
}
#big-grid{
    text-align:center;
}
.time-list{
     text-align:center;
}


.massage-title-h2{
    color:#338176;
    text-align:center;
}

.time-list{
     text-align:center;
}
.first-box{
    /*background: rgba(255, 255, 255, 0.15);*/
    /*border-radius: 20px;*/
    /*backdrop-filter: blur(10px);*/
    /*-webkit-backdrop-filter: blur(10px);*/
    /*border: 3px solid  #338176;*/
    margin: 1.2rem;
    /*box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);*/
    font-size: clamp(1.1rem, 1.2vw, 1.3vw);
    color: #555;
    text-align:center;
    /*transition: all 0.3s;*/
    /*cursor: pointer;*/
    

}

.massage-list {
    list-style: none;
    padding: 0%;
}
.two-grid-boxes{
    display:-ms-grid;
	display:grid;
	-ms-grid-columns:1fr 1fr;
	grid-template-columns:1fr 1fr;
	gap: 1.2vw;
    padding: 2% 1%; 
    
}
.one-grid-box{
    display:-ms-grid;
	display:grid;
	-ms-grid-columns:1fr;
	grid-template-columns:1fr;
	gap: 1.2vw;
    padding: 2% 1%; 
    
}

.items{
    /*background: rgba(255, 255, 255, 0.15);*/
    border-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 3px solid  #338176;
    margin: 1.2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    padding:3%;
    font-size: clamp(1.1rem, 1.2vw, 1.3vw);
    color: #555;
    transition: all 0.3s;
    /*cursor: pointer;*/
}
#first{
    /*border-bottom: 3px solid  #338176;*/
    margin:0% 3%;
}


.items:hover{
    background: #338176;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(62, 155, 142, 0.4);
    color:white;
}
.items:hover h2 {
    color: white;
}

#last-banner{
    border-top: 3px solid #338176
    margin: 0% 3%;
}
@media only screen and (max-width:768px){
	.two-grid-boxes{
        display:-ms-grid;
    	display:grid;
    	-ms-grid-columns:1fr;
    	grid-template-columns:1fr;
    	gap: 1.2vw;
        padding: 2% 1%; 
                   
    }
    .big-three-grid{
    display:-ms-grid;
	display:grid;
	-ms-grid-columns:1fr;
	grid-template-columns:1fr;

    
    }
}


/*Maternitiy CSS*/

.maternity-second-main{
    background-image: url(images/water-droplet.png);
    background-size: cover;
    padding:2%;
}
.maternity-title {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom:2%;
    padding-top:5%;
    font-size:clamp(2.4rem, 2.7vw, 2.8vw);
    

}
.maternity-second-main p {
    font-size: 1rem;
    color: #555;
    margin: 15px 0;
    font-size:clamp(1.1rem, 1.4vw, 1.6vw);
    text-align: center;
    line-height: 150%;

}


/*Refund CSS*/

.refund-second-main{
    background-image: url(images/water-droplet.png);
    background-size: cover;
    padding:2%;
}
.refund-title {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom:2%;
    padding-top:5%;
    font-size:clamp(2.4rem, 2.7vw, 2.8vw);
    

}
.refund-second-main p {
    color:#338176;
    font-size: 1rem;
    color: #555;
    margin: 15px 0;
    font-size:clamp(1.1rem, 1.4vw, 1.6vw);
    text-align: center;
    line-height: 150%;

}


/*Reserve CSS*/

.reserve-second-main{
    background-image: url(images/water-droplet.png);
    background-size: cover;
    padding: 40px 20px;
}

.big-ban {
    width: 100%;
    height: auto;
    display: block;
}

.banner-one {
    text-align: center;
}



.reserve-title {
    color:#338176;
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: clamp(1.8rem, 1.9vw, 2vw);
}
.end-quotes{
    /*font-size: 2.2rem;*/
    text-align: center;
}

.reserve-second-main p {
    font-size: 1rem;
    color: #555;
    margin: 15px 0;
    font-size: clamp(1.1rem, 1.2vw, 1.3vw);
}

.reserve-second-main ul {
    margin: 20px 0;
    padding-left: 20px;
    font-size: clamp(1.1rem, 1.2vw, 1.3vw);

}

.reserve-second-main ul li {
    margin-bottom: 12px;
    color: #333;
    line-height: 1.5;
}

.reserve-second-main ul li b {
    color: #c06c84;
}


.payment-box{
    display:grid;
    -ms-grid-columns: 1fr;
	grid-template-columns:1fr;
}
#payment-link{
    font-size: clamp(1rem, 1.8vw, 2.0vw); */
    /* text-align: center; */
    line-height: 150%;
    /* text-decoration: none; */
    background-color: #3e9b8e;
    /* padding: 2%; */
    border-radius: 9%;
    /* justify-content: center; */
    text-align: center;
    /* margin: 0% 35%; */
    margin-left: 40.6vw;
    margin-right: 40.6vw;
    /*font-size: clamp(1rem, 2.7vw, 4vw);*/
    text-decoration: none;
    color: white;
    font-weight: bold;
    transition: all 0.3s;
    cursor: pointer;
    margin-top: 5%;
}
#payment-link:hover{
    background: #29675f;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(62, 155, 142, 0.4);
}

@media only screen and (max-width: 768px) {
    #payment-link {
        /* font-size: clamp(1rem, 1.4vw, 1.6vw); */
        margin-right: 35.6vw;
        /* font-size: 1.3rem; */
        margin-left: 35.6vw;
    }
}
@media only screen and (max-width: 470px) {
    #payment-link {
        /* font-size: clamp(1rem, 1.4vw, 1.6vw); */
        margin-right: 25.6vw;
        font-size: 1.3rem;
        margin-left: 25.6vw;
    }
}
@media only screen and (max-width: 370px) {
    #payment-link {
        /* font-size: clamp(1rem, 1.4vw, 1.6vw); */
        margin-right: 20.6vw;
        font-size: 1.3rem;
        margin-left: 20.6vw;
    }
}


@media only screen and (max-width:768px){
    #big-banner{
        margin: 0%;
    }

}



/*Solitude-About Css*/

.candle-grid{
 /*   display:grid;*/
 /*   -ms-grid-columns:1fr 2fr;*/
	/*grid-template-columns:1fr 2fr;*/
	/*gap:1.2vw;*/
	/*padding: 3%;*/
	position:relative;
	padding: 2% 15%;
	place-self: center;
}

.box-over-img {
    position: absolute;
    top: 15%;
    /*bottom: 50%;*/
    left: 25%;
    right: 25%;
    font-size: clamp(0.7rem, 1vw, 1.3vw);
    text-align: center;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(10px);
    /* border-right: 3px solid #338176; */
    /* margin: 1.2rem; */
    /*box-shadow: 0 8px 32px rgba(0, 0, 0, 0);*/
}

.about-second-main{
    background-image: url(images/water-droplet.png);
    background-size: cover;
    padding:2%;
}
.candle-image{
    /*width:100%;*/
}
.about-title{
    color:#338176;
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom:2%;
    padding-top:5%;
    font-size:clamp(2.4rem, 2.7vw, 2.8vw);
}
.first-list{
    list-style-type: disclosure-closed;
}

.about-second-main p {
    font-size: 1rem;
    color: #555;
    margin: 15px 0;
    font-size:clamp(1.1rem, 1.4vw, 1.6vw);
    text-align: center;

}
.about-second-main ul {
    margin: 20px 2%;
    padding-left: 20px;
    font-size:clamp(0.9rem, 1.3vw, 1.4vw);
    text-align: center;
    list-style: none;

}

.about-second-main ul li {
    margin-bottom: 12px;
    color: #555;
    line-height: 1.5;
}
.about-second-main p.img-box {
    text-align: center;
    color: white;
}
#para{
    text-align: left;
}
li#food {
    color: #338176;
    font-weight: 800;
}
li#food2 {
    color: #338176;
    font-weight: 800;
}
li#food3 {
    color: #338176;
    font-weight: 800;
}

@media only screen and (max-width:769px){
	.candle-grid{
        display:grid;
        -ms-grid-columns:1fr;
    	grid-template-columns:1fr;
    }
    
    .first-list {
        text-align: center;
        list-style-type: none;
    }
    .first-line{
        text-align: center;
    }
    
}
@media only screen and (max-width:768px){
	.candle-grid{
        display:grid;
        -ms-grid-columns:1fr;
    	grid-template-columns:1fr;
    	display:static;
    	padding:2% 0%;
    	place-items: center;
    }
    .box-over-img {
        position: static;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        font-size: clamp(0.7rem, 1vw, 1.3vw);
        text-align: center;
        place-items: center;
    }
    .about-second-main p.img-box {
        text-align: left;
        color: #555;
    }
    .candle-image{
        /*width:80%;*/
    }
    
}
    



/*Treatments -Esthetics CSS*/

.treatment-second-main{
    background-image: url(images/water-droplet.png);
    background-size: cover;
    padding: 5% 0%;
}
.treatment-second-main h2{
    color:#338176;
    text-align:center;
}

.time-list{
     text-align:center;
}
.treatment-second-main h1{
    color: #338176;
}
.first-box{
    /*background: rgba(255, 255, 255, 0.15);*/
    /*border-radius: 20px;*/
    /*backdrop-filter: blur(10px);*/
    /*-webkit-backdrop-filter: blur(10px);*/
    /*border: 3px solid  #338176;*/
    margin: 1.2rem;
    /*box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);*/
    font-size: clamp(1.1rem, 1.2vw, 1.3vw);
    color: #555;
    text-align:center;
     /*transition: all 0.3s;*/
    /*cursor: pointer;*/
    

}
/*.first-box:hover{*/
/*    background: #29675f;*/
/*    transform: translateY(-2px);*/
/*    box-shadow: 0 4px 12px rgba(62, 155, 142, 0.4);*/
/*    color:white;*/
/*}*/

/*.first-box:hover h2 {*/
/*    color: white;*/
/*}*/

.treatment-second-main ul {
    list-style: none;
    padding: 0%;
}
.treatment-second-main .two-grid-boxes{
    display:-ms-grid;
	display:grid;
	-ms-grid-columns:1fr 1fr;
	grid-template-columns:1fr 1fr;
	gap: 1.2vw;
    padding: 2% 1%; 
    
}

.treatment-second-main .items{
    /*background: rgba(255, 255, 255, 0.15);*/
    border-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    margin: 1.2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    padding:3%;
    font-size: clamp(1.1rem, 1.2vw, 1.3vw);
    color: #555;
    transition: all 0.3s;
    /*cursor: pointer;*/
}
.treatment-second-main .items h1{
    text-align:center;
}

.treatment-second-main .items:hover{
    background: #338176;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(62, 155, 142, 0.4);
    color:white;
}
.treatment-second-main .items:hover h2 {
    color: white;
}
.treatment-second-main .items:hover h1 {
    color: white;
}
.treatment-second-main .items:hover .tiime{
    color:white;
}

.treatment-second-main #first{
    /*border-bottom: 3px solid  #338176;*/
    margin:0% 3%;
}
.tiime{
    text-align:center;
    font-weight: bold;
    color: #338176;
}
.treatment-second-main .last-grid{
    display:-ms-grid;
	display:grid;
	-ms-grid-columns:1fr 1fr 1fr 1fr;
	grid-template-columns:1fr 1fr 1fr 1fr;
	gap: 1.2vw;
    padding: 2% 1%;
}

.treatment-second-main .last-grid-items{
    border-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /*border-right: 3px solid  #338176;*/
    margin: 2.2vw 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    padding:0%;
    font-size: clamp(1.1rem, 1.2vw, 1.3vw);
    color: #555;
    transition: all 0.3s;
}
.treatment-second-main .last-grid-items:hover{
    background: #338176;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(62, 155, 142, 0.4);
    color:white;
}
.treatment-second-main .last-grid-items:hover h2{
    color:white;
}

.treatment-second-main .last-grid-items p{
    padding:5%;
}



/*.items:hover{*/
/*    background: #29675f;*/
/*    transform: translateY(-2px);*/
/*    box-shadow: 0 4px 12px rgba(62, 155, 142, 0.4);*/
/*    color:white;*/
/*}*/
/*.items:hover h2 {*/
/*    color: white;*/
/*}*/

#last-banner{
    border-top: 3px solid #338176
    margin: 0% 3%;
}
#wax ul{
    display: grid;
    grid-template-columns: 8fr 1fr;
    column-gap:1.2vw
    
}

#wax p{
    text-align:center;
}
.price{
    margin:0px;
    
}
.center-box{
    place-items:center
}

@media only screen and (max-width:768px){
	.treatment-second-main .two-grid-boxes{
        display:-ms-grid;
    	display:grid;
    	-ms-grid-columns:1fr;
    	grid-template-columns:1fr;
    	gap: 1.2vw;
        padding: 2% 1%; 
                   
    }
    .treatment-second-main .last-grid{
        display:-ms-grid;
    	display:grid;
    	-ms-grid-columns:1fr;
    	grid-template-columns:1fr;
    	gap: 1.2vw;
        padding: 2% 1%; 
    
    }
    #wax ul{
    /*text-align: center;*/
    display: grid;
    grid-template-columns: 8fr 1fr;

    }
    .last-grid-items p{
    padding:1%;
    }

    
}