:root {

    --dark-blue: #0B0D39;

    --medium-blue: #306DB6;

    --light-blue: #E2EFFF;



    --grey: #637381;

    --light-grey: #D4D2E3;

    --white-input: #F9F9FF;



    --text-xs: 12px;

    --text-sm: 16px;

    --text-md: 20px;

    --text-lg: 28px;

    --text-xl: 40px;

    --text-2xl: 64px;

    --text-uxl: 160px;

}





.font--jf {

    font-family: 'Josefin Sans', sans-serif !important;

}



.font--pp {

    font-family: 'Poppins', sans-serif !important;

}



.text--xs {

    font-size: var(--text-xs);

}



.text--sm {

    font-size: var(--text-sm);

}



.text--md {

    font-size: var(--text-md);

}



.text--lg {

    font-size: var(--text-lg);

}



.text--xl {

    font-size: var(--text-xl);

}



.text__hero--xl {

    font-size: var(--text-xl);

    line-height: 1.2;

}



.text__hero--2xl {

    font-size: var(--text-2xl);

    line-height: 1.2;

}



.text--2xl {

    font-size: var(--text-2xl);

}



.text--uxl {

    font-size: var(--text-uxl);

}



.text--bold {

    font-weight: bold;

}



.text--white {

    color: white;

}



.text--grey {

    color: var(--grey);

}



.text--dark-blue {

    color: var(--dark-blue);

}



.text--medium-blue {

    color: var(--medium-blue);

}



.text--light-blue {

    color: var(--light-blue);

}



.a--white {

    color: white;

    transition: color 0.6s ease-in-out;

}



.a--white:hover {

    color: var(--light-blue);

    text-decoration: none;

    transition: color 0.3s ease-in-out;

}



.a--grey {

    color: var(--grey);

    transition: color 0.6s ease-in-out;

}



.a--grey:hover {

    color: var(--medium-blue);

    text-decoration: none;

    transition: color 0.3s ease-in-out;

}



.a--dark-blue {

    color: var(--dark-blue);

    transition: color 0.6s ease-in-out;

}



.a--dark-blue:hover {

    color: var(--medium-blue);

    text-decoration: none;

    transition: color 0.3s ease-in-out;

}



.bg--darkBlue {

    background-color: var(--dark-blue);

}



.bg--mediumBlue {

    background-color: var(--medium-blue);

}



.bg--lightBlue {

    background-color: var(--light-blue);

}



.bg--white-input {

    background-color: var(--white-input);

}

.btn {

    border-radius: 10px;

    padding: 2% 5%;

    transition: all 0.5s ease-in-out;

    text-decoration: none;

    color: inherit; 

}



.btn:hover {

    cursor: pointer;

    transition: all 0.3s ease-in-out;

}



.btn--rounded {

    border-radius: 50px;

}



.btn--square {

    aspect-ratio: 1/1;

}





.btn--darkBlue {

    background-color: var(--dark-blue) !important;

    color: white !important;

    transition: background-color 0.6s ease-in-out;

}



.btn--darkBlue:hover {

    background-color: var(--light-blue) !important;

    color: var(--dark-blue) !important;

    transition: background-color 0.3s ease-in-out;

}



.btn--mediumBlue {

    background-color: var(--medium-blue) !important;

    color: white !important;

    transition: background-color 0.6s ease-in-out;

}



.btn--mediumBlue:hover {

    background-color: var(--light-blue) !important;

    color: var(--medium-blue) !important;

    transition: background-color 0.3s ease-in-out;

}



.grid--2rows {

    display: grid;

    grid-template-rows: 1fr 1fr;

}



.grid--2cols {

    display: grid;

    grid-template-columns: 1fr 1fr;

}



.grid--2-3cols {

    display: grid;

    grid-template-columns: 2fr 3fr;

}



.grid--3cols {

    display: grid;

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

    gap: 24px;

    margin-top: 12px;

}





.grid--4cols {

    display: grid;

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

    gap: 12px;

}



.grid--5cols {

    display: grid;

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

    gap: 12px;

}



.grid{

    display: grid;

}

.gr--1 {
    grid-row: auto;
}



.gap--24 {

    gap: 24px !important;

}



.gap--32 {

    gap: 32px !important;

}



.w--50 {

    width: 50%;

    margin: 0 auto;

}



.w--64 {

    width: 64px;

}



.w--128 {

    width: 128px;

}



.w--480 {

    width: 480px;

}



.mw--280 {

    max-width: 280px;

    margin: 0 auto;

}



.mw--400 {

    max-width: 400px;

    margin: 0 auto;

}

.mw--640 {

    max-width: 640px;

    margin: 0 auto;

}



.mw--1440 {

    max-width: 1440px;

    margin: 0 auto;

}



.mh--140 {

    max-height: 140px;

    object-fit: contain;

}



.h--64 {

    height: 64px;

}



.h--320 {

    height: 320px;

}



.h--fit {

    height: fit-content;

}



.h--screen {

    height: 100vh;

}



.w--fit {

    width: fit-content;

}



.w--screen {

    width: 100vw;

}



.list--unstyled {

    list-style: none;

    margin: 0;

    padding: 0;

}



.img--logo {

    width: 92px;

    height: 29px;

}



.p--container {

    padding: 120px 60px;

}

.pr--48 {

    padding-right: 48px !important;

}


.hr--r{

    border-right: 1px solid var(--dark-blue)

}



.rounded--16 {

    border-radius: 16px;

}



.textarea {

    resize: none;

}



.justify__items--center {

    justify-items: center;

}



.custom-hr {

    border: none;

    border-top: 4px solid black;

}



.shadow{

    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);

}



@media (max-width: 1400px) {

    .grid--5cols {

        grid-template-columns: 1fr 1fr 1fr;

    }



}



@media (max-width: 990px) {

    .grid--2cols {

        grid-template-columns: 1fr;

    }



    .grid--4cols {

        grid-template-columns: 1fr 1fr;

    }

    .gr--1 {
        grid-row: -1;
    }

    .w--50 {

        width: 100%;

    }



    .w--480 {

        width: 100%;

    }



    .p--container {

        padding: 24px;

    }

}



@media (max-width: 767px) {

    .grid--4cols {

        grid-template-columns: 1fr;

    }

    .grid--5cols {

        grid-template-columns: 1fr 1fr;

    }

    .hr--r{

        border-right: none;

    }

    .text--2xl {

        font-size: var(--text-xl);

    }



    .text--lg {

        font-size: var(--text-md);

    }



    .grid--3cols {

        grid-template-columns: 1fr 1fr;

    }



    .grid--2-3cols {

        grid-template-columns: 1fr;

    }



    

    .text__hero--xl {

        font-size: var(--text-md);

    }



    .text__hero--2xl {

        font-size: var(--text-md);

    }

    .pr--48 {

        padding-right: 0 !important;
    
    }

}



@media (max-width: 520px) {

    .grid--3cols {

        grid-template-columns: 1fr;

    }

    .grid--5cols {

        grid-template-columns: 1fr;

    }

}