/*====================================================*
 * MADIBENG CONNECT
 * TYPOGRAPHY
 *====================================================*/


/*====================================================*
 * BASE TYPOGRAPHY
 *====================================================*/

html{

    font-size:16px;

}


body{

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size:16px;

    line-height:1.65;

    font-weight:400;

    color:var(--mc-dark,#0f172a);

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}


/*====================================================*
 * HEADINGS
 *====================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    margin-top:0;

    color:var(--mc-dark,#0f172a);

    font-weight:800;

    line-height:1.15;

    letter-spacing:-.025em;

}


h1{

    font-size:clamp(40px,5vw,64px);

}


h2{

    font-size:clamp(30px,4vw,44px);

}


h3{

    font-size:clamp(21px,2.5vw,28px);

}


h4{

    font-size:21px;

}


h5{

    font-size:18px;

}


h6{

    font-size:16px;

}


/*====================================================*
 * PARAGRAPHS
 *====================================================*/

p{

    margin-top:0;

    margin-bottom:1rem;

    color:var(--mc-text,#475569);

}


p:last-child{

    margin-bottom:0;

}


/*====================================================*
 * LINKS
 *====================================================*/

a{

    color:var(--mc-primary,#0D6EFD);

    text-decoration:none;

    transition:

        color .2s ease,

        opacity .2s ease;

}


a:hover{

    color:var(--mc-primary-dark,#0958c7);

}


/*====================================================*
 * LISTS
 *====================================================*/

ul,
ol{

    margin-top:0;

    margin-bottom:1rem;

}


li{

    line-height:1.6;

}


/*====================================================*
 * SMALL TEXT
 *====================================================*/

small{

    font-size:13px;

}


.mc-text-small{

    font-size:13px;

    line-height:1.5;

}


.mc-text-muted{

    color:var(--mc-muted,#64748b);

}


/*====================================================*
 * EYEBROW / LABEL
 *====================================================*/

.mc-eyebrow{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:12px;

    color:var(--mc-primary,#0D6EFD);

    font-size:12px;

    font-weight:800;

    line-height:1.2;

    letter-spacing:.10em;

    text-transform:uppercase;

}


.mc-eyebrow::before{

    content:"";

    width:22px;

    height:2px;

    background:currentColor;

    border-radius:2px;

}


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

.mc-section-title{

    margin-bottom:10px;

}


.mc-section-description{

    max-width:680px;

    color:var(--mc-muted,#64748b);

    font-size:16px;

    line-height:1.7;

}


/*====================================================*
 * HERO TYPOGRAPHY
 *====================================================*/

.mc-hero h1{

    font-weight:850;

    letter-spacing:-.045em;

}


.mc-hero p{

    font-size:18px;

    line-height:1.7;

}


/*====================================================*
 * BUTTON / CTA TEXT
 *====================================================*/

.mc-btn{

    font-size:14px;

    font-weight:700;

    line-height:1;

}


.mc-mobile-submit{

    font-size:15px;

}


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

.mc-card-content h3{

    font-size:20px;

    font-weight:750;

    line-height:1.3;

}


.mc-card-content p{

    font-size:14px;

    line-height:1.65;

}


.mc-card-meta{

    font-size:13px;

}


/*====================================================*
 * CATEGORY TYPOGRAPHY
 *====================================================*/

.mc-category h3{

    font-size:16px;

    font-weight:750;

    line-height:1.3;

}


.mc-category span{

    font-size:13px;

}


/*====================================================*
 * EVENT TYPOGRAPHY
 *====================================================*/

.mc-event-content h3{

    font-size:21px;

    line-height:1.3;

}


.mc-event-content p{

    font-size:14px;

}


/*====================================================*
 * FOOTER TYPOGRAPHY
 *====================================================*/

.mc-footer{

    font-size:14px;

}


.mc-footer h3,
.mc-footer h4{

    font-size:16px;

    font-weight:750;

}


/*====================================================*
 * FORM TYPOGRAPHY
 *====================================================*/

input,
textarea,
select,
button{

    font-family:inherit;

}


input,
textarea,
select{

    font-size:15px;

}


/*====================================================*
 * MOBILE TYPOGRAPHY
 *====================================================*/

@media(max-width:768px){

    body{

        font-size:15px;

        line-height:1.6;

    }


    h1{

        font-size:38px;

    }


    h2{

        font-size:30px;

    }


    h3{

        font-size:21px;

    }


    .mc-section-description{

        font-size:15px;

    }


    .mc-hero p{

        font-size:16px;

    }


    .mc-card-content h3{

        font-size:16px;

    }

}


/*====================================================*
 * SMALL PHONES
 *====================================================*/

@media(max-width:480px){

    h1{

        font-size:34px;

    }


    h2{

        font-size:27px;

    }


    h3{

        font-size:19px;

    }


    .mc-eyebrow{

        font-size:11px;

    }

}