@font-face {
    font-family: Guardian Egyptian Web,
        Georgia,
        serif;
    src: url("../fonts/GHGuardianHeadline-Bold.woff2");
    src: url("../fonts/GHGuardianHeadline-Medium.woff2");
    src: url("../fonts/GHGuardianHeadline-MediumItalic.woff2");
    src: url("../fonts/GuardianTextEgyptian-Bold.woff2");
    src: url("../fonts/GuardianTextEgyptian-Regular.woff2");
    src: url("../fonts/GuardianTextSans-Bold.woff2");
    src: url("../fonts/GuardianTextSans-Regular.woff2");
}

body {
    font-family: "Guardian Egyptian Web";
}

.container {
    max-width: 1300px !important;
}

/* 
@media screen and (min-width:740px) {
    .container {
        max-width: 740px !important;
    }
} */

.blue-bg {
    background-color: #041F4A;
}

div.top-bar a {
    color: #fff;
    font-weight: bold;
    margin-right: 12px;
    padding-right: 12px;
    border-right: 1px solid #fff;
    text-decoration: none;
}

nav.blue-bg div.container {
    justify-content: end;
}

div.top-bar a:hover {
    text-decoration: underline;
}

.color-yllw {
    color: #FFE500 !important;
}

.top-bar-dropdown button {
    font-weight: bold;
}

.top-bar-dropdown li a {
    color: #000;
    font-weight: normal;
    text-decoration: none !important;
}

@media screen and (max-width:768px) {
    div.top-bar a {
        display: none;
    }

    .top-bar-dropdown {
        display: none;
    }

    nav.blue-bg div.container {
        justify-content: start;
    }

    div.top-bar a:nth-child(2) {
        border: 0;
    }

    .header-ul li a {
        color: #fff;
        text-decoration: none;
        padding-left: 12px !important;
        padding-right: 12px !important;
        font-size: 16px !important;
        font-weight: 600;
    }

}

.blue-light-bg {
    background-color: #052962;
}

.bg-yllw {
    color: #000;
    background-color: #FFE500;
}

.bg-yllw:hover {
    color: #000;
    background-color: #FFE500;
}

.bg-yllw:focus {
    color: #000;
    background-color: #FFE500;
    border-color: #FFE500;
    box-shadow: 0 0 0 0.25rem rgb(255 229 0 / 50%);
}


.bg-color-yllw {
    color: #000;
    background-color: #FFE500;
    border: 0;
    border-radius: 24px;
    font-weight: bold;
}

.list-group {
    flex-direction: row !important;
}

.list-group li {
    border-radius: 0 !important;
    background-color: transparent;
    color: #fff;
}

.header-ul li a:hover {
    color: #FFE500;
}

.header-ul li a {
    color: #fff;
    text-decoration: none;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 24px;
    font-weight: 600;
}

.header-ul li {
    position: relative !important;
}

.header-ul li:not(:first-child)::before {
    border-right: 0.0625rem solid #506991;
    top: 0;
    z-index: 1;
    bottom: 0;
    content: '';
    display: block;
    left: 0;
    position: absolute;
    bottom: 18px;
}

nav.col-12 .container {
    border: 0.0625rem solid #506991;
    border-bottom: 0;
}

.nav-cat li {
    border: 0;
}

.nav-cat,
.nav-cat-bottom-svg {
    border: 0.0625rem solid #dcdcdc;
    border-bottom: 0;
    border-top: 0;
}

.w-max-content {
    width: max-content;
    padding: 12px;
    background-color: #FFE500;
}

.main-article {
    border: 0.0625rem solid #dcdcdc;
    border-bottom: 0;
    border-right: 0;
    border-top: 0;
}

.paddind-x {
    padding-left: 12px;
    padding-right: 12px;
}

article {
    border: 0.0625rem solid #dcdcdc;
    border-bottom: 0;
    border-top: 0;
}

.nav-cat ul li a {
    width: max-content;
    color: #000;
}

.nav-cat ul {
    flex-wrap: unset !important;
    overflow-x: auto;
}

.offcanvas-body .nav-link {
    color: #fff;
}

.offcanvas-body .nav-item {
    border-bottom: 0.0625rem solid #fff;
}

.offcanvas-body .nav-item:first-child {
    border-top: 0.0625rem solid #fff;
}

.offcanvas-body .nav-item a:hover {
    background-color: #032254;
}

.offcanvas-body .nav-item a:focus {
    background-color: #032254;
}

.header-ul .nav-item a:focus:after {
    border-top: 4px solid #FF5943;
    left: 0;
    right: 0px;
    top: -1px;
    content: '';
    display: block;
    position: absolute;
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}

.header-ul .nav-item a:active:after {
    border-top: 4px solid #FF5943;
    left: 0;
    right: 1px;
    top: -1px;
    content: '';
    display: block;
    position: absolute;
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}

.nav-link:focus{
    color: #FFE500 !important;
}