:root{
    --bs-primary-rgb: 50, 150, 226;
    --bs-primary-hsl: hsl(206, 75%, 54%);
    --bs-primary-dark-hsl: hsl(206, 75%, 45%);
    --bs-dark-rgb: 16, 24, 40;
    --bs-gray-rgb: 52, 64, 84;
    --bs-dark-alt-rgb: 29, 41, 57;
}
.object-cover{
    object-fit: cover;
}
body{
    font-family: 'Manrope', sans-serif;
}
.ff-roboto{
    font-family: 'Roboto Slab', serif;
}
.sidebar-nav{
    width: 297px;
    transition: all 300ms ease-in-out;
}


.fs-14{
    font-size: 14px;
}
.fs-18{
    font-size: 18px;
}
.fs-12{
    font-size: 12px;
}
.fs-20{
    font-size: 20px;
}
.fs-30{
    font-size: 30px;
}
.fw-medium{
    font-weight: 500;
}

.mb-40{
    margin-bottom: 40px;
}
.mb-20{
    margin-bottom: 20px;
}
.mb-48{
    margin-bottom: 48px;
}
.mb-12{
    margin-bottom: 12px;
}
.mb-32{
    margin-bottom: 32px;
}

.py-12{
    padding-top: 12px;
    padding-bottom: 12px;
}
.py-32{
    padding-top: 32px;
    padding-bottom: 32px;
}
.py-96{
    padding-top: 96px;
    padding-bottom: 96px;
}
.py-64{
    padding-top: 64px;
    padding-bottom: 64px;
}
.pt-64{
    padding-top: 64px;
}
.px-56{
    padding-left: 56px;
    padding-right: 56px;
}
.py-48{
    padding-top: 48px;
    padding-bottom: 48px;
}
.pb-48{
    padding-bottom: 48px;
}
.pt-30{
    padding-top: 30px;
}

.p-32{
    padding: 32px;
}


.bg-gray{
    background-color: rgb(var(--bs-gray-rgb)) ;
}
.bg-gray-50{
    background-color: #F9FAFB;
}
.bg-gray-100{
    background-color: #F2F4F7;
}
.text-gray-400{
    color: #98A2B3;
}
.text-gray-500{
    color: #667085;
}
.text-gray-900{
    color: #101828;
}
.bg-gray-900{
    background-color: #1D2939;
}


.bg-primary-50{
    background-color: #E0F1FF;
}
.text-primary-700{
    color: #2176B8;
}
.bg-idigo-50{
    background-color: #EEF4FF;
}
.text-indigo-700{
    color: #3538CD;
}
.bg-pink-50{
    background-color: #FDF2FA;
}
.text-pink-700{
    color: #C11574;
}
.border-gray{
    border-color: #344054 !important;
}
.border-gray-400{
    border-color: #98A2B3 !important;
}
.borde-primary-700{
    border-color: #2176B8!important;
}



.sidebar-nav .navbar-nav .nav-link{
    color: white;
    padding: 10px 16px;
}
.sidebar-nav .navbar-nav .nav-link.active, .sidebar-nav .navbar-nav .nav-link:hover{
    background: #1D2939;
}
.sidebar-nav .navbar-nav .nav-link .icon{
    margin-right: 12px;
}

.custom-scroll{
    scrollbar-color: rgba(var(--bs-gray-rgb),.3) transparent;
    scrollbar-width: thin;
}
/* width */
.custom-scroll::-webkit-scrollbar {
    width: 5px;
    height: 8px;
}

/* Track */
.custom-scroll::-webkit-scrollbar-track {
    background: transparent;
}

/* Handle */
.custom-scroll::-webkit-scrollbar-thumb {
    background: rgba(var(--bs-gray-rgb),.3);
    border-radius: 10px;
}

/* Handle on hover */
.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--bs-gray-rgb))
}

.btn{
    --bs-btn-padding-y: 10px;
    --bs-btn-padding-x: 20px;
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: .5rem;
}
.btn-primary{
    --bs-btn-bg: var(--bs-primary-hsl);
    --bs-btn-border-color: var(--bs-primary-hsl);

    --bs-btn-hover-bg: var(--bs-primary-dark-hsl);
    --bs-btn-hover-border-color: var(--bs-primary-dark-hsl);

    --bs-btn-active-bg: var(--bs-primary-hsl);
    --bs-btn-active-border-color: var(--bs-primary-hsl);
}
.btn-light{
    --bs-btn-bg: hsl(0, 0%, 100%);
    --bs-btn-border-color: #D0D5DD;
    --bs-btn-color: #344054;

    --bs-btn-hover-bg: hsl(0, 0%, 95%);

    --bs-btn-active-bg: hsl(0, 0%, 100%);
}

.form-control{
    padding: 10px 14px;
    border: 1px solid #D0D5DD;
    border-radius: .5rem;
}
.form-control:focus{
    border-color: rgba(var(--bs-primary-rgb),.6);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb),.1);
}
.main-content header{
    border-radius: 80px 0px 0px 0px;
}
.banner-slide{
    padding: 56px;
}

.role-item img{
    height: 48px;
    width: 100%;
    object-fit: contain;
}

.footer-nav .nav-link{
    color: white;
}


.pagination{
    --bs-pagination-border-width: 0px;
    --bs-pagination-color: #667085;
    --bs-pagination-hover-color:#1D2939;
    --bs-pagination-active-bg:#F9FAFB;
    --bs-pagination-hover-bg: #F9FAFB;
    --bs-pagination-active-color:#1D2939;
    --bs-pagination-padding-x: 16px;
    --bs-pagination-padding-y: 8px;
}
.pagination .page-item .page-link {
    border-radius: 8px;
}




.social-link {
    height: 40px;
    width: 40px;
}

.contact-us{
    max-width: 512px;
}
.nav-pills .nav-link{
    padding: 10px 14px;
    color: #667085;
}
.nav-pills .nav-link:hover{
    color: #344054;
}
.nav-pills .nav-link.active{
    --bs-nav-pills-link-active-bg: white;
    --bs-nav-pills-link-active-color: #344054;
    box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
}
.border-gray-200{
    border-color: #EAECF0 !important;
}

.presskit-container{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}
@media (min-width: 768px){
    .presskit-container{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.row-span-2 {
    grid-row: span 2 / span 2;
}
.col-span-1 {
    grid-column: span 1 / span 1;
}
.col-span-2 {
    grid-column: span 2 / span 2;
}

@media(max-width:1280px){
    .sidebar-nav{
        position: fixed;
        z-index: 1000;
        margin-left: -297px;
    }
    .main-content header{
        border-radius: 0px;
    }
}
@media(max-width:992px){
    .footer-logo{
        width: 100%;
    }
}
.toggle-menu{
    z-index: 100;
    top: 15px;
    left: 17px;
}
.sidebar-nav.open{
    margin-left: 0px;
}
.splide__arrows{
    z-index: 100;
}
.splide__arrow{
    width: 56px;
    height: 56px;
    transition: all ease-in-out 300ms;
    transform: none;
}
.splide__arrow:hover{
    background-color: rgba(255, 255, 255, 0.226) !important;
}
@media(max-width:992px){
    .splide__arrows {
        top: 15px;
        bottom: auto !important;
    }
    .splide__arrow{
        width: 45px;
        height: 45px;
    }
}