@font-face {
    font-family: 'Klapt';
    src: url("../fonts/Klapt/SevenTypeKlaptArabic-Light.otf");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Klapt';
    src: url("../fonts/Klapt/SevenTypeKlaptArabic-Regular.otf");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Klapt';
    src: url("../fonts/Klapt/SevenTypeKlaptArabic-Medium.otf");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Klapt';
    src: url("../fonts/Klapt/SevenTypeKlaptArabic-Bold.otf");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


p:last-of-type{
    margin-bottom: 0;
}

a:hover{
    text-decoration: none;
}

.font-light{
    font-weight: 300;
}

.font-regular{
    font-weight: 400;
}

.font-medium{
    font-weight: 500;
}

.font-semibold{
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.text-base {
    font-size: 1rem;  /* -16px -*/
}


.text-lg{
    font-size: 18px;
}

.text-xl{
    font-size: 22px;
}

.text-2xl{
    font-size: 26px;
}

.text-3xl{
    font-size: 40px;
}

.text-4xl{
    font-size: 50px;
}

.text-5xl{
    font-size: 60px
}

@media (max-width: 991.98px) {

}

@media (max-width: 767.98px) {
    .text-xl{
        font-size: 18px;
    }

    .text-2xl{
        font-size: 20px;
    }

    .text-3xl{
        font-size: 26px;
    }

    .text-4xl{
        font-size: 32px;
    }

    .text-5xl{
        font-size: 40px
    }
}

@media (max-width: 575.98px) {
    .text-4xl{
        font-size: 30px;
    }

    .text-5xl{
        font-size: 38px
    }
}