/* =====================================
   ARSP COMPONENTS
===================================== */

:root{
    --primary:#16246D;
    --primary-dark:#0F1A57;
    --gold:#B8902D;
    --white:#ffffff;
    --light:#F4F6FB;
    --border:#E7EAF3;
    --text:#2C2C2C;
    --shadow:0 12px 35px rgba(0,0,0,.08);
}

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

.container{
    width:92%;
    max-width:1400px;
    margin:auto;
}

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

section{
    padding:90px 0;
}

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

.section-header{
    text-align:center;
    margin-bottom:60px;
}

.section-header h2{
    font-size:48px;
    color:var(--primary);
    margin:18px 0;
}

.section-header p{
    font-size:18px;
    color:#666;
    max-width:700px;
    margin:auto;
    line-height:1.8;
}

/* =========================
   BADGE
========================= */

.section-badge{
    display:inline-block;
    background:#EEF2FF;
    color:var(--primary);
    padding:10px 24px;
    border-radius:50px;
    font-weight:700;
    font-size:14px;
    letter-spacing:1px;
    text-transform:uppercase;
}

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

.btn{
    display:inline-block;
    padding:15px 34px;
    background:var(--primary);
    color:#fff;
    border-radius:8px;
    font-weight:700;
    transition:.3s;
}

.btn:hover{
    background:var(--gold);
    color:var(--primary);
}

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

.card{
    background:#fff;
    border-radius:18px;
    box-shadow:var(--shadow);
    padding:35px;
}

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

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

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

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

/* =========================
   IMAGE
========================= */

img{
    max-width:100%;
    display:block;
}

/* =========================
   TABLET
========================= */

@media(max-width:1024px){

    .grid-4{

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

    }

    .grid-3{

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

    }

    .grid-2{

        grid-template-columns:1fr;

    }

    .section-header h2{

        font-size:38px;

    }

}

/* =========================
   SMALL TABLET
========================= */

@media(max-width:768px){

    section{

        padding:70px 0;

    }

    .grid-4,
    .grid-3{

        grid-template-columns:1fr;

    }

    .section-header h2{

        font-size:30px;

    }

}