/*==================================================
  LAYOUT.CSS
  Zen Spa Home
==================================================*/

/*==============================================
  WRAPPER
==============================================*/

.wrapper{

    position:relative;

    width:100%;

    overflow:hidden;

}

/*==============================================
  CONTAINER
==============================================*/

.container{

    width:100%;

    max-width:var(--container-width);

    margin-inline:auto;

    padding-inline:var(--container-padding);

}

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

.section{

    position:relative;

    padding-block:var(--section-padding);

}

.section-sm{

    padding-block:80px;

}

.section-lg{

    padding-block:160px;

}

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

.section-header{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:1.5rem;

    max-width:760px;

    margin:0 auto 5rem;

}

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

.grid{

    display:grid;

}

.grid-2{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:4rem;

}

.grid-3{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:2rem;

}

.grid-4{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:2rem;

}

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

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}

.flex-between{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

/*==============================================
  GAP
==============================================*/

.gap-sm{

    gap:1rem;

}

.gap-md{

    gap:2rem;

}

.gap-lg{

    gap:4rem;

}

/*==============================================
  ALIGN
==============================================*/

.items-center{

    align-items:center;

}

.items-start{

    align-items:flex-start;

}

.items-end{

    align-items:flex-end;

}

.justify-center{

    justify-content:center;

}

.justify-between{

    justify-content:space-between;

}

/*==============================================
  WIDTH
==============================================*/

.w-full{

    width:100%;

}

.h-full{

    height:100%;

}

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

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

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

.pt-1{padding-top:1rem;}
.pt-2{padding-top:2rem;}
.pt-3{padding-top:3rem;}
.pt-4{padding-top:4rem;}

.pb-1{padding-bottom:1rem;}
.pb-2{padding-bottom:2rem;}
.pb-3{padding-bottom:3rem;}
.pb-4{padding-bottom:4rem;}

/*==============================================
  OBJECT FIT
==============================================*/

.cover{

    width:100%;

    height:100%;

    object-fit:cover;

}

.contain{

    width:100%;

    height:100%;

    object-fit:contain;

}

/*==============================================
  POSITION
==============================================*/

.relative{

    position:relative;

}

.absolute{

    position:absolute;

}

.fixed{

    position:fixed;

}

/*==============================================
  OVERFLOW
==============================================*/

.overflow-hidden{

    overflow:hidden;

}

/*==============================================
  RADIUS
==============================================*/

.rounded{

    border-radius:var(--radius-lg);

}

.rounded-full{

    border-radius:999px;

}

/*==============================================
  SHADOW
==============================================*/

.shadow{

    box-shadow:var(--shadow-md);

}

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

.divider{

    width:100%;

    height:1px;

    background:var(--color-border);

}

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

@media (max-width:992px){

    .grid-2{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .grid-3{

        grid-template-columns:repeat(2,1fr);

    }

    .grid-4{

        grid-template-columns:repeat(2,1fr);

    }

    .section{

        padding-block:100px;

    }

}

@media (max-width:768px){

    .section{

        padding-block:var(--section-padding-mobile);

    }

    .grid-3,

    .grid-4{

        grid-template-columns:1fr;

    }

    .section-header{

        margin-bottom:3rem;

    }

}