/*==================================================
  LAYOUT
  Zen Spa Home
==================================================*/

/*==============================================
  ROOT LAYOUT
==============================================*/

.container{

    width:min(100% - 48px, 1280px);

    margin-inline:auto;

}

.section{

    position:relative;

    padding:clamp(100px, 10vw, 160px) 0;

    overflow:hidden;

}

/*==============================================
  SECTION HEADER
==============================================*/

.section-header{

    max-width:760px;

    margin:0 auto 80px;

    text-align:center;

}

/*==============================================
  GRID
==============================================*/

.grid{

    display:grid;

    gap:2rem;

}

/*==============================================
  FLEX
==============================================*/

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

/*==============================================
  BUTTONS
==============================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.75rem;

    min-width:220px;

    height:58px;

    padding:0 2rem;

    border:none;

    border-radius:999px;

    background:var(--color-primary);

    color:#fff;

    font-size:.95rem;

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

    cursor:pointer;

    transition:

        transform .35s ease,

        background .35s ease,

        color .35s ease,

        box-shadow .35s ease;

}

.btn:hover{

    transform:translateY(-3px);

    background:var(--color-primary-dark);

    box-shadow:0 20px 40px rgba(0,0,0,.20);

}

/*==============================================
  OUTLINE BUTTON
==============================================*/

.btn-outline{

    background:transparent;

    color:#fff;

    border:1px solid rgba(255,255,255,.35);

}

.btn-outline:hover{

    background:#fff;

    color:#111;

}

/*==============================================
  ICONS
==============================================*/

.btn i{

    font-size:.9rem;

    transition:transform .3s ease;

}

.btn:hover i{

    transform:translateX(4px);

}

/*==============================================
  IMAGES
==============================================*/

.image-cover{

    width:100%;

    height:100%;

    object-fit:cover;

}

/*==============================================
  UTILITIES
==============================================*/

.text-center{

    text-align:center;

}

.hidden{

    display:none !important;

}

.overflow-hidden{

    overflow:hidden;

}

/*==============================================
  SPACING
==============================================*/

.mt-0{margin-top:0;}
.mt-1{margin-top:1rem;}
.mt-2{margin-top:2rem;}
.mt-3{margin-top:3rem;}
.mt-4{margin-top:4rem;}

.mb-0{margin-bottom:0;}
.mb-1{margin-bottom:1rem;}
.mb-2{margin-bottom:2rem;}
.mb-3{margin-bottom:3rem;}
.mb-4{margin-bottom:4rem;}

/*==============================================
  DIVIDER
==============================================*/

.divider{

    width:100%;

    height:1px;

    background:rgba(255,255,255,.08);

}

/*==============================================
  RESPONSIVE
==============================================*/

@media (max-width:992px){

    .container{

        width:min(100% - 40px, 1000px);

    }

    .section{

        padding:100px 0;

    }

}

@media (max-width:768px){

    .container{

        width:min(100% - 32px, 100%);

    }

    .btn{

        width:100%;

        min-width:100%;

    }

    .section-header{

        margin-bottom:60px;

    }

}