/* =========================
   ROOT VARIABLES
========================= */
:root {
    --black: #000;
    --white: #fff;
    --bg: #FAFAFA;
    --text: #7A7A7A;
    --accent: #FFBD2B;
    --accent-2: #022A68;
    --card-bg: #F1F1F1;
    --overlay: #B4B4B4;
}

/* =========================
   RESET
========================= */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =========================
   BASE
========================= */
body {
    background: var(--bg);
    font-family: 'Lato', sans-serif;
    color: var(--text);
    font-size: 16px;
    line-height: 1.7;
}

/* =========================
   CONTAINER
========================= */
.container {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
}

/* =========================
   TYPOGRAPHY
========================= */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    color: var(--black);
    font-weight: 700;
    line-height: 1.3;
}

h1 { font-size: 48px; }
h2 { font-size: 36px; }
h3 { font-size: 28px; }
h4 { font-size: 22px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

p {
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 10px;
}

.p-lg { font-size: 18px; }
.p-sm { font-size: 14px; }

/* =========================
   LINKS
========================= */
a {
    color: var(--accent-2);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--accent);
}

/* =====================================================
                   BASE BUTTON
===================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-weight: 700;
    font-size: 16px;
    border-radius: 6px;
    border: none;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.25s ease, color 0.3s ease;
}

/* TEXT ABOVE LAYER */
.btn span,
.btn i,
.btn svg {
    position: relative;
    z-index: 2;
}

/* HOVER FLOAT */
.btn:hover {
    transform: translateY(-3px);
}

/* COMMON HOVER BG ANIMATION */
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.4s ease;
    z-index: 0;
}

.btn:hover::before {
    transform: scaleX(1);
}

/* =====================================================
                VARIANTS
===================================================== */

/*  accent → hover accent-2 */
.btn-accent {
    background: var(--accent);
    color: var(--white);
}
.btn-accent::before {
    background: var(--accent-2);
}
.btn-accent:hover {
    color: var(--white);
}

/*  accent-2 → hover accent */
.btn-accent2 {
    background: var(--accent-2);
    color: var(--white);
}
.btn-accent2::before {
    background: var(--accent);
}
.btn-accent2:hover {
    color: var(--white);
}

/*  accent → hover white */
.btn-accent-white {
    background: var(--accent);
    color: var(--white);
}
.btn-accent-white::before {
    background: var(--white);
}
.btn-accent-white:hover {
    color: var(--black);
}

/*  accent-2 → hover white */
.btn-accent2-white {
    background: var(--accent-2);
    color: var(--white);
}
.btn-accent2-white::before {
    background: var(--white);
}
.btn-accent2-white:hover {
    color: var(--black);
}

/*  transparent border white → hover accent */
.btn-border-white-accent {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
}
.btn-border-white-accent::before {
    background: var(--accent);
}
.btn-border-white-accent:hover {
    color: var(--white);
    border-color: var(--accent);
}

/* transparent border white → hover accent-2 */
.btn-border-white-accent2 {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
}
.btn-border-white-accent2::before {
    background: var(--accent-2);
}
.btn-border-white-accent2:hover {
    color: var(--white);
    border-color: var(--accent-2);
}



/* =========================
   SECTIONS
========================= */
section {
    padding: 60px 0;
}

.card-custom {
    background: var(--card-bg);
    padding: 25px;
    border-radius: 8px;
}


/* =========================
   TABLET
========================= */
@media (max-width: 1024px) {

    h1 { font-size: 40px; }
    h2 { font-size: 32px; }
    h3 { font-size: 26px; }

    .navbar-nav li a {
        font-size: 12px;
        margin: 0 8px;
    }

    .container {
        max-width: 95%;
    }
}

/* =========================
   MOBILE
========================= */
@media (max-width: 767px) {

    h1 { font-size: 36px; }
    h2 { font-size: 28px; }
    h3 { font-size: 24px; }

    body { font-size: 15px; }

    section {
        padding: 30px 20px;
    }

    p { font-size: 15px; margin-bottom: 0;}

    .p-lg { font-size: 16px; }
    
    .btn {
        padding: 10px 18px;
       
    }
}