/* ==========================================================
   NemuTrip Layout
   Version : 2.0 Production (LOCKED)
   ========================================================== */

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

.container{
    width:100%;
    max-width:var(--container);
}

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

.section{
    padding:var(--section-padding) 0;
}

.section-sm{
    padding:70px 0;
}

.section-lg{
    padding:120px 0;
}

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

.section-heading{
    margin-bottom:60px;
}

.section-heading.text-center{
    max-width:760px;
    margin:0 auto 60px;
}

.section-subtitle{
    display:inline-block;
    margin-bottom:12px;
    font-size:.875rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--primary);
}

.section-title{
    margin-bottom:20px;
    font-size:clamp(2rem,4vw,3rem);
    font-weight:700;
    color:var(--dark);
}

.section-description{
    max-width:720px;
    margin:0 auto;
    font-size:1.05rem;
    color:var(--gray);
    line-height:1.8;
}

.section-heading:not(.text-center) .section-description{
    margin-left:0;
}

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

.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;
}

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

.grid-2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.grid-4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

/* ==========================================================
   CARD
   ========================================================== */

.card-box{
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    padding:30px;
    transition:var(--transition);
}

.card-box:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow);
}

/* ==========================================================
   BACKGROUND
   ========================================================== */

.bg-light{
    background:var(--light);
}

.bg-primary{
    background:var(--primary);
    color:var(--white);
}

.bg-white{
    background:var(--white);
}

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

.mb-60{
    margin-bottom:60px;
}

.mt-60{
    margin-top:60px;
}

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

@media (max-width:991.98px){

    .section{
        padding:var(--section-padding-mobile) 0;
    }

    .section-heading{
        margin-bottom:45px;
    }

    .section-heading.text-center{
        margin-bottom:45px;
    }

    .grid-4{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:767.98px){

    .grid-2,
    .grid-3,
    .grid-4{
        grid-template-columns:1fr;
    }

    .section-title{
        font-size:2rem;
    }

    .section-description{
        font-size:1rem;
    }

}