/*#region Slider*/
#Banner {
    width: 100%;
    overflow: hidden;
    height: 385px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 50px;
}

.swiper {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.swiper-slide {
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: start;
    border-radius: 10px;
    overflow: hidden;
    height: 89%;
}

    .swiper-slide > *:not(img),
    #Banner > div:last-of-type > a > *:not(img) {
        position: relative;
        z-index: 2;
    }

    .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        filter: brightness(0.5);
    }


    .swiper-slide > h5 {
        color: #fff;
        margin: 5px 0 5px 1rem;
        font-size: 18px;
    }

    .swiper-slide > p {
        color: #fff;
        margin: 0 0 1rem 1rem;
        font-size: 13px;
    }

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal {
    display: flex;
}

    .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        background: var(--saa-yellow);
        width: 10px;
        height: 10px !important;
        opacity: 0.2;
        transition: 200ms;
    }

.swiper-pagination-bullet-active {
    background: var(--saa-yellow);
    opacity: 1 !important;
    width: 25px !important;
    border-radius: 10px;
}

#Banner > div:last-of-type {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    height: 89%;
}

    #Banner > div:last-of-type > a {
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: start;
        position: relative;
        width: 100%;
        overflow: hidden;
        border-radius: 10px;
        height: 100%;
    }

        #Banner > div:last-of-type > a > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            filter: brightness(0.5);
        }


        #Banner > div:last-of-type > a > h5 {
            color: #fff;
            margin: 5px 0 5px 1rem;
            font-size: 15px;
        }

        #Banner > div:last-of-type > a > p {
            color: #fff;
            margin: 0 0 1rem 1rem;
            font-size: 11px;
        }

/*#endregion Slider*/

/*#region News*/
#News {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

    #News > h1 {
        width: 100%;
        text-align: left;
        font-size: 33px;
        margin-bottom: 0;
        text-transform: capitalize;
    }

    #News > div:first-of-type {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

        #News > div:first-of-type > div:last-of-type {
            border: 1px solid var(--saa-blue);
            border-radius: 30px;
            width: 300px;
            height: 36px;
            position: relative;
            overflow: hidden;
        }

            #News > div:first-of-type > div:last-of-type > input {
                width: 80%;
                height: 100%;
                padding: 0 40px 0 20px;
                border: none;
                outline: none;
                color: var(--saa-blue);
            }

            #News > div:first-of-type > div:last-of-type > i {
                position: absolute;
                top: 9px;
                right: 15px;
                color: var(--saa-blue);
                cursor: pointer;
            }

        #News > div:first-of-type > div > span:last-of-type:not(span:last-of-type) {
            font-size: 18px;
            color: #464646;
            cursor: pointer;
            transition: 400ms ease;
            transition-property: color, font-size;
            position: relative;
            font-weight: 500;
            text-align: center;
        }

#Paging {
    margin: 2rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

    #Paging > a {
        color: #9bbad1;
        font-size: 20px;
    }

        #Paging > a.active {
            background: var(--saa-blue);
            border-radius: 50%;
            height: 32px;
            width: 33px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
        }
/*#endregion */

/*#region Newsbox*/
#NewsBox {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    width: 100%;
}

    #NewsBox > div {
        width: 100%;
        height: fit-content;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(276px,1fr));
        row-gap: 3rem;
        column-gap: 15px;
    }

        #NewsBox > div > a {
            display: flex;
            flex-direction: column;
            align-items: start;
            overflow: hidden;
        }

            #NewsBox > div > a > img {
                transition: 500ms;
                width: 100%;
                height: 180px;
                border-radius: 10px;
                object-fit: cover;
            }

            #NewsBox > div > a:hover > img {
                filter: brightness(0.85);
            }

            #NewsBox > div > a > span {
                margin-bottom: 5px;
                color: var(--saa-yellow);
                font-size: 12px;
                font-weight: 600;
                margin-top: 10px;
            }

            #NewsBox > div > a > p {
                color: var(--saa-blue);
                font-size: 15px;
                font-weight: 800;
                width: 100%;
                margin-bottom: 5px;
            }

            #NewsBox > div > a > small {
                color: #656565;
                font-size: 11px;
                font-weight: 600;
            }

        #NewsBox > div[data-id="2"],
        #NewsBox > div[data-id="3"] {
            display: none;
        }
/*#endregion */

/*#region Aside */
aside > div:first-of-type > div {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(67px, 1fr));
    gap: 10px;
}

aside > div:first-of-type > p {
    color: var(--saa-blue);
    font-weight: 600;
    font-size: 17px;
    padding: 0 10px 16px;
}

aside > div:first-of-type > div > div > :is(label,span) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--saa-blue);
    border: 1px solid #cccccc54;
    padding: 10px;
    cursor: pointer;
    text-align: center;
    height: 58px;
}

aside > div:first-of-type > div > a {
    position: relative;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
    text-align: center;
    font-size: 11px;
    color: #666666;
    border-radius: 10px;
    box-shadow: rgb(0 0 0 / 4%) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    gap: 6px;
    transition: 200ms;
}

    aside > div:first-of-type > div > a:hover {
        background: #8080800f;
    }

    aside > div:first-of-type > div > a > img {
        height: 25px;
        width: 25px;
        object-fit: contain;
    }

aside > div:first-of-type > span {
    border: 1px solid #0000001c;
    font-size: 12px;
    cursor: pointer;
    background: var(--saa-blue);
    color: #fff;
    padding: 5px 10px;
    border-radius: 15px;
    display: block;
    width: max-content;
    margin: auto;
    margin-top: 17px;
}

aside > div:first-of-type > div > span > i {
    font-size: xx-large;
}

.hidden {
    display: none;
}


.populerNews {
    margin-top: 30px;
}

    .populerNews > h4 {
        color: var(--saa-blue);
        font-weight: 600;
        font-size: 17px;
        padding: 16px 10px;
    }

    .populerNews > div {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

        .populerNews > div > a {
            display: flex;
            flex-direction: column;
            justify-content: end;
            align-items: start;
            position: relative;
            width: 100%;
            overflow: hidden;
            border-radius: 10px;
            height: 160px;
        }

            .populerNews > div > a > img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: absolute;
                filter: brightness(0.5);
            }

            .populerNews > div > a > h5 {
                position: relative;
                z-index: 1;
                color: #fff;
                margin: 5px 0 5px 1rem;
                font-size: 15px;
            }

            .populerNews > div > a > p {
                position: relative;
                z-index: 1;
                color: #fff;
                margin: 0 0 1rem 1rem;
                font-size: 11px;
            }

aside > div.populerNews:last-of-type > div {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

    aside > div.populerNews:last-of-type > div > a > h5 {
        margin: 13px;
        font-size: 12px;
    }

.mySwiper2 {
    height: 177px;
}

    .mySwiper2 .swiper-slide {
        height: 83%;
    }

.responsive-news {
    display: none;
}

    .responsive-news i {
        color: var(--saa-yellow);
    }
/*#endregion*/
/*#region Ads*/
aside > a {
    width: 100%;
    margin-top: 50px;
    display: block;
    max-width: 500px;
}

    aside > a > img {
        width: 100%;
        height: 750px !important;
        object-fit: contain;
    }

/*#endregion*/

.overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    background: #0000005e;
    top: 0;
    z-index: 11;
    overflow: hidden;
    display: none;
}

@media(max-width:1400px) {
}

@media(max-width:1200px) {
    #NewsBox {
        grid-template-columns: 1fr 271px;
    }

    #News > div:first-of-type > div:last-of-type {
        width: 271px;
    }

    aside > div:first-of-type > div {
        grid-template-columns: repeat(auto-fill, 80px);
    }
}

@media(max-width:992px) {
    #NewsBox > aside {
        position: fixed;
        top: 69px;
        right: -500px;
        width: 300px;
        height: 100%;
        background-color: #f8f8f8;
        box-shadow: -3px 0 5px rgba(0, 0, 0, 0.2);
        padding: 20px;
        transition: right 0.4s ease-in-out;
        display: block;
        overflow: auto;
        height: calc(100% - 100px);
        z-index: 12;
    }
        #NewsBox > aside.open {
            right: 0;
        }
    .responsive-news {
        display: flex;
        position: fixed;
        right: 20px;
        bottom: 20px;
        border-radius: 20px;
        width: 35px;
        height: 35px;
        background: var(--saa-blue);
        justify-content: center;
        align-items: center;
        z-index:11;
    }

    #NewsBox {
        grid-template-columns: 1fr;
    }

    #Slider {
        height: 300px;
    }

    #News > div:first-of-type > div > span:last-of-type {
        font-size: 15px;
    }
    #NewsBox > div {
        grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
    }
}

@media(max-width:768px) {
    #News > div:first-of-type {
        flex-direction: column;
        align-items: start;
        gap: 1.5rem;
    }



    #Carousel > div > p {
        width: 70%;
    }

        #Carousel > div > p > a > span {
            font-size: 20px;
        }

        #Carousel > div > p > a > small {
            font-size: 15px;
            line-height: 20px;
        }

    #Carousel > div > p {
        background: linear-gradient(90deg, rgb(21 54 85 / 80%) 0%, rgb(255 255 255 / 0%) 100%);
    }

    #Banner > div:last-of-type > a > h5 {
        font-size: 10px;
    }

    #Banner > div:last-of-type > a > p {
        font-size: 8px;
    }
    #Banner > div:last-of-type{
        display:none;
    }
    #Banner {
        grid-template-columns: 1fr;
        height: 323px;
        margin-top: 10px;
    }
}

@media(max-width:576px) {
    #Slider {
        height: 190px;
    }

    #Carousel > div > p > a > small {
        white-space: nowrap;
        overflow: hidden;
        width: 204px;
        text-overflow: ellipsis;
    }

    .btn {
        padding: 0 1rem;
    }

    #Dots {
        bottom: 36px;
    }

    #Banner {
        height: 235px;
    }
}