@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
.site-banner {
    position: relative;
    /* width: 75%; */
    height: 50vh;
    overflow: hidden;
    margin: 10px auto;
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.bannerSlider {
    position: relative;
    width: 67%;
    margin: auto;
    height: 100%;
    overflow: hidden;
    padding: 10px;
}


.slider{
    /*position: relative;*/
    width: 100%;
    height: 100%;
    background: #074065; /* darckblue */
    object-fit: cover;
}

.myslide{
    display: none; 
    width: 100%;
    height: 100%;
    position: relative;
}

.myslide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container without distorting the aspect ratio */
}

.sliderimg{
    /* transform: scale(1.5, 1.5); */
    -webkit-animation-name: zoomin;
    -webkit-animation-duration: 40s;
    animation-name: zoomin;
    animation-duration: 40s;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sliderprev, .slidernext{
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    font-size: 40px;
    padding: 15px;
    cursor: pointer;
    color: #fff;
    transition: 0.1s;
    user-select: none;
}

.sliderprev:hover, .slidernext:hover{
    color: #074065; /* blue */
}

.slidernext{
    right: 0;
}

.sliderdotsbox{
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: 20px;
    cursor: pointer;
}

.sliderdot{
    display: inline-block;
    width: 20px;
    height: 5px;
    border: 2px solid #fff;
    border-radius: 30%;
    margin: 0 2px;
    cursor: pointer;
}

.active, .sliderdot:hover{
    border-color: #074065; /* blue */
}

.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

.bannerSideContainer{
    border: solid 1px black;
    margin: auto;
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.bannerBtnBox{
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    margin: 10px;
    border: solid 1px red;
}
.bannerBtnBox .btnBox{
    margin: 10px auto;
}

.newsDetailbox{
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    height: 100%;
    margin: 10px;
    border: solid 1px blue;
}

@-webkit-keyframes fade {
    from {opacity: 0.8}
    to {opacity: 1}
}
@keyframes fade {
    from {opacity: 0.8}
    to {opacity: 1}
}
@-webkit-keyframes zoomin {
    from {transform: scale(1, 1);}
    to {transform: scale(1.5, 1.5);}
}
@keyframes zoomin {
    from {transform: scale(1, 1);}
    to {transform: scale(1.5, 1.5);}
}

@media screen  and (max-width:992px){
    .site-banner {
        flex-direction: column;
        gap: 10px;
    }
    .bannerSlider {
        width: 100%;
    }

    .bannerSideContainer{
        width: 90%;
        display: flex;
        flex-direction: row;
    }
    .bannerBtnBox{
        flex-direction: column;
        width: max-content;
    }
    .bannerBtnBox .btnBox{
        margin: auto 5px;
    }

    .newsDetailbox{
        height: auto;
        width: 70%;
        margin: 10px;
        border: solid 1px blue;
    }
}

@media screen  and (max-width:767px){
    .site-banner {
        height: 40vh;
    }
    .sliderprev, .slidernext{
        font-size: 20px;
        padding: 10px;
    }
    .sliderdot{
        width: 10px;
        height: 3px;
        border: 1px solid #fff;
        border-radius: 30%;
        margin: 0 1px;
        cursor: pointer;
    }

    .bannerSideContainer{
        flex-direction: column;
    }

    .bannerBtnBox{
        justify-content: center;
        flex-direction: row;
        width: 90%;
        margin: 5px auto;
    }
    .bannerBtnBox .btnBox{
        margin: auto 10px;
    }
    .newsDetailbox{
        width: 90%;
        margin: 5px auto;
        height: 100%;
    }
}

@media screen  and (max-width:576px){
}