@import 'header.css';
@import 'overview.css';
@import 'grid.css';
@import 'university.css';
@import 'glance.css';
@import 'admission-requirement.css';
@import 'documents-required.css';
@import 'admission-process.css';
@import 'cost.css';
@import 'faq.css';
@import 'loader.css';
@import 'footer.css';
@import 'modal.css';
@import 'contact-page.css';

:root {
    --font-family-one: 'Roboto', sans-serif;
    --font-family-two: 'Raleway', sans-serif;

    --font-size-one: 48px;
    --font-size-one-b: 38px;
    --font-size-one-c: 28px;
    --font-size-one-d: 18px;
    --font-size-two: 20px;

    --color-white-one: #ffffff;
    --color-red-one: #dc143c;
    --color-red-two: #b90e30;
    --color-blue-one: #212042;
    --color-black-one: #222222;
    --color-gray-one: #ddd;
    --color-gray-two: #f1f4f6;
    --color-yellow-one: #eaad16;
}

body {
    font-size: var(--font-size-two);
}

h1 {
    font-family: var(--font-family-two);
    font-size: var(--font-size-one);
    font-weight: 1;

}

h2 {
    font-family: var(--font-family-one);
    font-size: var(--font-size-one-b);
    font-weight: normal;
}

h3 {
    font-family: var(--font-family-one);
    font-size: var(--font-size-one-c);
    font-weight: normal;
}

p {
    font-size: var(--font-size-two);
}

.btn {
    display: inline-block;

    padding: 10px;

    background: var(--color-blue-one);
    color: var(--color-white-one);

    font-size: var(--font-size-two);
    font-weight: normal;

    text-decoration: none;
    border-radius: 5px;

    transition: 0.3s;
}

.btn:hover {
    background: var(--color-red-one);
    color: var(--color-white-one);
}

h5 {
    font-family: var(--font-family-one);
    font-size: var(--font-size-one-d);
    font-weight: normal;
}

.red-color {
    color: var(--color-red-one);
}

.blue-color {
    color: var(--color-blue-one);
}

.subtitle {
    font-weight: 300 !important;
}

h2.subtitle {
    font-family: var(--font-family-two);
}



.btn {
    background: var(--color-red-one) !important;
    color: var(--color-blue-one) !important;
    text-shadow: -1px -1px 0 var(--color-white-one), 1px -1px 0 var(--color-white-one), -1px 1px 0 var(--color-white-one), 1px 1px 0 var(--color-white-one);
    border: 5px solid var(--color-yellow-one) !important;
    width: fit-content;
    white-space: nowrap;
}

.btn:hover {
    background: var(--color-blue-one) !important;
    color: var(--color-red-one) !important;
    text-shadow: -1px -1px 0 var(--color-white-one), 1px -1px 0 var(--color-white-one), -1px 1px 0 var(--color-white-one), 1px 1px 0 var(--color-white-one);
    border: 5px solid var(--color-yellow-one) !important;
    width: fit-content;
    white-space: nowrap;
}

.active>.page-link, .page-link.active {
    padding: 0px 5px;
}