body { 
    font-family: "calibri"; 
    background:aliceblue; 
    margin:0; padding:0; 
}

*{box-sizing: border-box;margin:0;}
.row{display: flex;}
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12 
{padding: 10px}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 800px) {.row{display: block;}.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11{width: 100%}}
/* Responsive Containers */
.cont-10 { margin: auto; width: 10%; }
.cont-15 { margin: auto; width: 15%; }
.cont-20 { margin: auto; width: 20%; }
.cont-25 { margin: auto; width: 25%; }
.cont-30 { margin: auto; width: 30%; }
.cont-35 { margin: auto; width: 35%; }
.cont-40 { margin: auto; width: 40%; }
.cont-45 { margin: auto; width: 45%; }
.cont-50 { margin: auto; width: 50%; }
.cont-55 { margin: auto; width: 55%; }
.cont-60 { margin: auto; width: 60%; }
.cont-65 { margin: auto; width: 65%; }
.cont-70 { margin: auto; width: 70%; }
.cont-75 { margin: auto; width: 75%; }
.cont-80 { margin: auto; width: 80%; }
.cont-85 { margin: auto; width: 85%; }
.cont-90 { margin: auto; width: 90%; }
.cont-95 { margin: auto; width: 95%; }
@media screen and (max-width: 800px) {.cont-10,.cont-15,.cont-20,.cont-25,.cont-30,.cont-35,.cont-40,.cont-45,.cont-50,.cont-55,.cont-60,.cont-65,.cont-70,.cont-75,.cont-80,.cont-85,.cont-90,.cont-95 { width: 100%;}}

    /* All Stories horizontal layout */
    .all_stories {
        display: flex;
        flex-direction: row;
        gap: 15px;
        overflow-x: auto;
        padding: 10px 0;
        margin-top: 20px;
        border-top: 1px solid #ddd;
    }

    .all_stories h3 {
        width: 100%;
        flex-basis: 100%;
        margin-bottom: 10px;
    }

    .all_stories .article {
        min-width: 160px;
        max-width: 160px;
        border: 1px solid #eee;
        padding: 8px;
        background: #fafafa;
        border-radius: 5px;
        text-align: center;
        flex-shrink: 0;
    }

    .all_stories .article img {
        width: 100%;
        height: 90px;
        object-fit: cover;
        border-radius: 4px;
    }

    .all_stories .article h4 {
        font-size: 12px;
        margin: 6px 0;
        line-height: 1.2;
    }

    .all_stories small {
        font-size: 9px;
        color: gray;
    }

/* Scrollbar styling for better visibility */
.all_other_stories {
    display: flex;
    flex-direction: row;
    gap: 15px;
    overflow-x: auto;
    padding: 10px 0;
    margin-top: 20px;
    border-top: 1px solid #ddd;
}

.all_other_stories h3 {
    width: 100%;
    flex-basis: 100%;
    margin-bottom: 10px;
}

.all_other_stories .article {
    min-width: 160px;
    max-width: 160px;
    border: 1px solid #eee;
    padding: 8px;
    background: #fafafa;
    border-radius: 5px;
    text-align: center;
    flex-shrink: 0;
}

.all_other_stories .article img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 4px;
}

.all_other_stories .article h4 {
    font-size: 12px;
    margin: 6px 0;
    line-height: 1.2;
}

.all_other_stories small {
    font-size: 9px;
    color: gray;
}

.other_news_tittle{
    display: flex;
}

.sideNav {
    background: none; 
    padding: 20px;
    position:fixed;
    font-size:16px;
    height:100%;
    width:130px;
    box-sizing:border-box;
    color: white;
}

    @media screen and (max-width:800px) {
        .sideNav {
            display: none;
    }    
    }

    .sideNav button {
        background:#333; 
        color:#fff; 
        border:none; 
        padding:10px 15px; 
        border-radius:4px; 
        cursor:pointer;
        width: 100%;
        margin-bottom: 10px;
    }

    .social-icons {
        background: #000;
        padding: 10px;
        border-radius: 4px;
        text-align: center;
        width: 200px;
    }

    #mainPageTittle{
        background:#333;
        justify-content: space-between;
        display: flex;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        border-bottom: 5px solid #555;
    }

    #mainPageTittle img{
        width: 250px;
        margin: auto;
    }

    .menu-icon {
        width: 30px;
        cursor: pointer;
        display: none;
    }

    .menu-icon span {
        display: block;
        height: 3px;
        background: white;
        margin: 6px 0;
        border-radius: 2px;
    }

    @media screen and (max-width:800px) {
        .menu-icon {
            display: block;
        }
    }

    /* Hidden by default (below 800px) */
    #mainPageTittle form {
        text-align: center;
        padding: 4px;
        display: none;
    }

    /* Visible at 800px and above */
    @media screen and (min-width: 800px) {
        #mainPageTittle form {
            display: flex;
        }
    }

    #mainPageTittle form button{
        text-align: left;
        padding: 4px
    }
    

    #mainPageTittle form button:hover{
        background: none;
    }

    #mainPageTittle input[type="text"]{
        text-indent: 5px;
        width: 200px;
        border-radius: 25px;
        border: 1px solid #ccc;
    }

        #mainPageTittle img {
        width: 250px;
        border-radius: 0px;
        box-shadow: none;
        border: none;
    }

    h1,h2,h3 { 
        margin:0 0 10px 0; 
    }

    p { 
        line-height:1.6; 
    }
    a { 
        color:#000; 
        text-decoration:none; 
    }
    a:hover { 
        text-decoration:underline; 
    }
    .article { 
        background:#fff; 
        padding:20px; 
        margin-bottom:20px; 
        border-radius:4px; 
    }
    .sidebar-item { 
        margin-bottom:15px; 
    }
    button { 
        background:#333; 
        color:#fff; 
        border:none; 
        padding:10px 15px; 
        border-radius:4px; 
        cursor:pointer;width: 
        100%; 
    }
    button:hover { 
        background:#555; 
    }
    img { 
        box-shadow: 0px 0px 5px gray;
        border: 1px solid white;
        border-radius: 10px;
        width:100%;
    }

    /* Over Lay */
    
    .overlay {
        height: 100%;
        width: 0px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #333;
        overflow-x: hidden;
        transition: 0.5s;
    }

    .overlay-content {
        position: relative;
        top: 25%;
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }

    .overlay a {
        padding: 8px;
        text-decoration: none;
        font-size: 36px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

    .overlay a:hover, .overlay a:focus {
        color: #f1f1f1;
    }

    .overlay .closebtn {
        position: absolute;
        top: 20px;
        right: 45px;
        font-size: 60px;
        cursor: pointer;
        color: #fff;
    }

    /* Media query for smaller screens */
    @media screen and (max-height:800px) {
    .overlay a {
        font-size: 20px
    }
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
    }

    .sample{
        color:white;
        font-size:30px;
        display: none;
        cursor: pointer;
    }

    @media screen and (max-width:800px) {
    .sample{
        display: block;
    }
    }