@font-face {
  	font-family: 'Granville Light Italic';
  	src: url(/wp-content/uploads/2022/01/Granville-Light-Italic.woff2);
}

h3.about-us-introtxt, #main p, h3.experience-title, .experience-service-holder .experience-single h3 {
	font-family: 'Granville Light Italic';
}


section {
    float: left;
    width: 100%;
    background: #efecec;
}

.home-sections {
    padding: 30px 0;
    float: left;
    width: 100%;
}
.h2-icon {
    max-height: 95px;
    text-align: center;
    display: block;
    margin: 0 auto;
}

/**HERO**/

.hero-section {
    min-height: 100vh;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 150px 0;
    text-shadow: 1px 1px 2px rgb(0 0 0 / 45%);
    position: relative;
    background-position: top center;
}
.hero-gradient {
    position: absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(179deg, rgba(0,0,0,0.35) 0%, transparent 30%);
    top: 0;
    z-index: 1;
}
.hero-holder {
    position: relative;
    z-index: 2;
    max-width: 460px;
    margin: 0 auto 30px;
    background: #7d7d7db0;
    padding: 30px 15px 15px;
    border-radius: 20px;
    height: 260px;
}
.hero-holder h1 {
    text-transform: uppercase;
    font-size: 32px;
    margin-bottom: 35px;
	letter-spacing: 3px;
    line-height: 1.3em;
}
.hero-holder p {
    font-size: 24px;
    line-height: 33px;
}
.hero-section .main-btn{
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
}
.hero-section .main-btn a {
    width: auto;
}
/**BAGDES**/
.badges-holder {
    display: flex;
    justify-content: space-evenly;
}

.badges-holder img {
    max-height: 110px;
}

/**ABOUT**/
section.about-section.home-sections {
    padding: 50px 0 110px;
}
h3.about-us-introtxt {
    text-align: center;
/*     text-transform: uppercase; */
    font-size: 24px;
	line-height: 30px;
    max-width: 845px;
    margin: 0 auto 70px;
}
.about-box {
    background: linear-gradient(90deg, transparent 70.6%, #dfd9d97d 70.6%, #dfd9d97d 70.6%);
    padding: 20px;
    text-align: center;
    border-radius: 15px;
}
.about-box p {
    font-size: 21px;
    margin-top: 15px;
    line-height: 27px;
}
.about-box h2{
    margin-top: 10px;
    text-transform: uppercase;
}
.about-box img {
    max-width: 78px;
    text-align: center;
    margin: 0 auto;
}
/**EXPERIENCE**/
section.experience-section.home-sections {
    padding: 80px 0 100px;
}

.experience-num-1 { grid-area: pool; }
.experience-num-2 { grid-area: gym; }
.experience-num-3 { grid-area: sauna; }
.experience-num-4 { grid-area: salt; }
.experience-num-5 { grid-area: steam; }
.experience-num-6{ grid-area: massage; }
.experience-holder .main-btn {grid-area: button;}

.experience-holder{
    display: grid;
    gap: 20px;
  grid-template-areas:
    'pool pool pool sauna sauna sauna'
    'pool pool pool sauna sauna sauna'
    'pool pool pool salt salt salt'
    'pool pool pool salt salt salt'
    'massage massage massage massage massage massage'
    'gym gym gym steam steam steam'
    'gym gym gym steam steam steam'
    'gym gym gym button button button';
  padding: 10px;
}

.experience-single img {
    min-height: 350px;
    object-fit: cover;
    width: 100%;
}

.experience-main-title {
    margin-bottom: 20px;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
}

h3.experience-title {
    margin: 0;
    position: absolute;
    background: linear-gradient(90deg, transparent 0%, #dfd9d93b 0%, #dfd9d93b 74%);
    padding: 15px;
    /* border: 1px solid #494c8f; */
	/* color: rgba(0,0,0,.6); */
    color: #4a4a8e;
    font-weight: bold;
    border-radius: 15px 0 15px 0px;
}

.experience-img {
    height: 100%;
}

.experience-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
		border-radius: 15px;
}
.experience-section .main-btn {
    display: flex;
}
.experience-section .main-btn a {
    margin: 0px auto 0;
    width: 100%;
}
.experience-section .main-btn a:hover {
    margin: 0 auto;
    color: white;
    background: var(--main-color-dark);
    border: 1px solid var(--main-color-dark);

}
.experience-main-title, .testimonial-section h2{
    margin-top: 10px;
}
/**TESTIMONIAL**/
.testimonial-section.home-sections {
    padding: 0;
}
.testimonial-bg {
    min-height: 1280px;
    position: relative;
    background-position: bottom center;
}

.testimonial-section h2 {
    text-transform: uppercase;
    text-align: center;
}

.testimonial-box {
    max-width: 450px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -50px;
    background: white;
    padding: 25px 20px;
}

p.testimonial-author {
    text-transform: uppercase;
    text-align: right;
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 40px;
}

/**BANNER**/
section.banner-section.home-sections {
    color: white;
}

.banner-holder {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 60px 20px;
    background-color: #fff;
    border-radius: 15px;
    border: 1px solid #4a4a8e;
    color: #4a4a8e;
}

.banner-holder .main-btn a {
    width: auto;
    padding: 10px 30px;
}

.banner-holder h5 {
    text-transform: uppercase;
    font-size: 1.6em;
	line-height: 1.4em;
    font-weight: 800;
}

.banner-holder p {
    margin-bottom: 20px;
    font-size: 1.6em;
}

/* MEDIA */

@media all and (min-width:320px) {}

@media all and (min-width:576px) {}

@media all and (max-width:576px) {}

@media all and (min-width:768px) {}

@media all and (max-width:767px) {}

@media all and (min-width:992px) {
	 .hero-section{
        background-position-x: -15px;
    }
    .about-bottom-section {
        border-radius: 15px;
        position: relative;
        background-position: right;
        min-height: 1000px;
        background-position-x: -1px;
    }
    .about-box {
        max-width: 520px;
        position: absolute;
        top: 30%;
        transform: translateY(-30%);
    }
	.banner-holder p {
		display: flex;
		justify-content: center;
	}
}

@media all and (max-width:991px) {
    .hero-section{
        height: 100%;
        min-height: 100%;
        padding: 100px 0px 80px;
    }
    .hero-gradient {
        background: linear-gradient(179deg, rgba(0,0,0,0.25) 0%, transparent 15%);
    }
    .hero-section h1 {
        font-size: 28px;
        line-height: 32px;
    }
    .hero-section p {
        font-size: 20px;
        line-height: 25px;
    }
    html .main-btn a{
        font-size: 18px;
        padding: 10px 15px;
    }
    .badges-section{
        display: none;
    }
    section.about-section.home-sections {
        padding: 0px 0 50px;
    }
    .about-box {
       padding: 0 5px;
       background: none;
    }
	.about-box p{
		font-size: 20px;
	}
	.about-box h2{
		font-size: 31px;
	}
    h3.about-us-introtxt {
        text-align: center;
        text-transform: initial;
        font-size: 21px;
		line-height: 27px;
        padding: 40px 10px 0;
        font-style: italic;
        margin-bottom: 10px;
    }
    
	.banner-holder p{
		line-height: 1.3em;
	}
    html .about-bottom-section{
        background-image:none!important;
    }
    .about-img-mob {
        /* max-height: 110px; */
        margin: 30px auto 20px;
        display: flex;
        width: 100%;
    }
    section.experience-section.home-sections {
        padding: 50px 0;
    }
    .experience-holder{
        display: block;
    }
    .experience-single{
        padding: 0px;
        margin-bottom: 15px;
    }
    .experience-single img {
        height: 250px;
        object-fit: cover;
        width: 100%;
    }
    .experience-section .main-btn a {
        margin-top: 15px;
    }

    .testimonial-box {
        width: 85%;
    }
    .testimonial-bg{
        min-height: 700px;
    }
    
    section.banner-section.home-sections {
        padding: 20px 0px;
        text-align: center;
    }
    .banner-holder {
        flex-direction: column;
        }
	.banner-holder p {
		margin-bottom: 45px;
	}
    .h2-icon{
        max-height: 70px;
    }
}

@media all and (min-width:1200px) {

}

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

@media all and (min-width: 992px) and (max-width: 1200px) {}


/* MEDIA */