@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300..700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body{
font-family: 'Mukta', sans-serif;
font-size: 1rem;
line-height: 1.4;
background-color: #efefef;
}
ul, li{
list-style: none;
}
a,
a:active,
a:focus{
text-decoration: none;
color: #4b4b4b;
transition: all .4s ease;
}
a:hover{
color: #bf1b2c;
}
h1{
font-size: 2.5rem;
}
h2{
font-size: 2rem;
}
h3{
font-size: 1.5rem;
}
h4{
font-size: 1.25rem;
}
h5{
font-size: 1rem;
}
h6{
font-size: 0.9rem;
}
p{
color: #3a3a3a;
font-size: 1.1rem;
line-height: 1.5;
}
img{
width: 100%;
height: auto;
}
/* Variables */
:root{
--primary-color: #cf151c;
--secondary-color: #08278b;
/* --primary-color: #d16e31;
--secondary-color: #3e1364; */
/* --secondary-color: #001d46; */
}
/* Container */
.container{
width: 1200px;
margin-left: auto;
margin-right: auto;
}
/* Spacing */
.mt-1{
margin-top: 1rem;
}
.mb-1{
margin-bottom: 1rem;
}
.ml-1{
margin-left: 1rem;
}
.mr-1{
margin-right: 1rem;
}
.mt-2{
margin-top: 2rem;
}
.mb-2{
margin-bottom: 2rem;
}
.text-center{
text-align: center;
}
.d-flex-aic-gap1{
display: flex;
align-items: center;
gap: 1rem;
}
.main-header{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
margin: 1rem 0;
}
/* Social */
.social{
display: flex;
gap: .5rem;
align-items: center;
}
.social li{
margin-right: 0.75rem;
}
.social li i{
font-size: 1.25rem;
padding: .5rem;
border-radius: 100%;
transition: all .5s ease;
}
i.bxl-facebook{
color: var(--secondary-color);
border: 2px solid var(--secondary-color);
}
li:hover i.bxl-facebook{
background-color: var(--secondary-color);
color: #efefef;
}
i.bxl-twitter{
color: #1a72b7;
border: 2px solid #1a72b7;
}
li:hover i.bxl-twitter{
background-color: #1a72b7;
color: #efefef;
}
i.bxl-youtube{
color: #c20807;
border: 2px solid #c20807;
}
li:hover i.bxl-youtube{
background-color: var(--primary-color);
color: #efefef;
}
i.bxl-instagram{
color: #f90d8b;
border: 2px solid #f90d8b;
}
li:hover i.bxl-instagram{
background-color: #f90d8b;
color: #efefef;
}
.logo img{
max-width: 480px;
border-radius: 0.5rem;
}
.date-today{
text-align: center;
margin-top: 0.75rem;
}
.date-today span{
color: var(--primary-color);
}
.mobile-logo{
display: none
}
/* Search */
.search-form{
display: flex;
align-items: center;
gap: 0.5rem;
}
.search-btn{
color: #efefef;
padding: 0.8rem 0.9rem;
background-color: var(--primary-color);
border-radius: 0.5rem;
margin-left: -0.9rem;
transition: all .4s ease;
}
.search-btn:hover, .search-btn:focus{
background-color: var(--secondary-color);
}
.search-btn i{
font-size: 1.25rem;
}
button, button:focus, input, input:focus{
border: none;
outline: none;
}
input{
padding: 1rem;
min-height: 2rem;
border-radius: 0.5rem;
}
.search-form .form-group input{
font-family: 'Mukta', sans-serif;
font-size: 0.9rem;
font-weight: 500;
border: 2px solid #feecec;
min-width: 12rem;
}
/* Navigation Menu */
nav{
box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
background-color: var(--secondary-color);
background-attachment: fixed;
background-size: cover;
}
.menu-bar{
display: flex;
justify-content: space-between;
align-items: center;
}
.menu-btn{
color: #efefef;
padding: 0.75rem;
background-color: var(--primary-color);
transition: all .4s ease;
}
.menu-btn i{
font-size: 1.75rem;
}
.menu{
display: flex;
align-items: center;
}
.menu .menu-item{
padding: 0.825rem 1.1rem;
transition: all .4s ease;
}
.menu .menu-item:hover, .menu .menu-item.active{
background-color: var(--primary-color);
}
.menu .menu-item a{
font-size: 1.1rem;
font-weight: 500;
color: #efefef;
transition: all .4s ease;
}
.epaper-button a {
color: #efefef;
font-size: 1rem;
font-weight: 600;
padding: .3rem 0.9rem;
border: 2px solid #efefef;
border-radius: 2rem;
transition: .3s;
background: var(--primary-color);
}
.epaper-button a:hover{
color: var(--primary-color);
background-color: #efefef;
}
nav.sticky {
margin-top: 0;
z-index: 3;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
/* Back To Top */
#btn-back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
border-radius: 50%;
padding: .6rem .75rem;
z-index: 9;
background-color: var(--primary-color);
color: #efefef;
font-size: 1.25rem;
}
/* Flash News */
.flash-news{
margin: 2rem 0;
}
.breaking-news{
margin: 1rem 0;
padding: 2rem 1rem;
background-color: #fefefe;
border-radius: 0.25rem;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.breaking-title{
text-align: center;
}
.breaking-title span{
color: #efefef;
font-size: 0.75rem;
font-weight: 500;
padding: 0.15rem 1.5rem 0 1.5rem;
border-radius: 1rem;
background: var(--primary-color);
}
.breaking-news a:hover h2{
color: var(--secondary-color);
}
.breaking-title h2{
color: #3a3a3a;
font-size: 2.25rem;
padding: 1rem 2rem;
}
.breaking-image{
text-align: center;
margin: 1rem 0;
}
.breaking-image img{
width: 50%;
}
.breaking-meta{
text-align: center;
}
.breaking-meta .meta-date{
display: flex;
justify-content: center;
align-items: center;
gap: 0.25rem;
}
.meta-date{
padding-bottom: 1rem;
}
.breaking-meta .meta-date i{
color: #3a3a3a;
background: none;
border: 2px solid #bf1b2caa;
padding: 0.5rem;
border-radius: 100%;
}
.breaking-meta .meta-date span{
color: #6d6d6d;
font-size: 0.8rem;
}
.breaking-excerpt{
padding: 1rem 2rem;
}
.breaking-excerpt p{
color: #4b4b4b;
}
/* Footer Area Starts */
footer {
background: var(--secondary-color) url(../images/Artboard.svg) no-repeat left top;
background-size: cover;
}
.footer-container{
padding: 5rem 0;
}
.footer{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
gap: 1.5%;
color: #dedede;
}
.footer-logo{
flex: 20%;
align-self: center;
}
.contact-details{
flex: 25%;
}
.sanchalak{
flex: 25%;
}
.footer-navigation{
flex: 25%;
}
.footer-logo img{
background-color: #efefef;
height: 12rem;
width: 12rem;
object-fit: contain;
border-radius: 50%;
}
.footer-title h2{
position: relative;
font-size: 2rem;
margin-bottom: 1.5rem;
}
.footer-title h2::after{
position: absolute;
content: "";
background-color: #efefef99;
height: 0.15rem;
width: 5rem;
left: 0;
bottom: 0;
border-radius: 1rem;
}
.contact li{
color: #dedede;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0;
}
.contact li a{
color: #dedede !important;
}
.contact li i {
padding: 0.51rem 0.5rem;
border: 2px solid #dedede;
border-radius: 50%;
}
.personel li{
display: flex;
align-items: center;
gap: 1rem;
margin: 1rem 0;
}
.personel li i{
font-size: 1.5rem;
}
.person span{
margin: 0.5rem 0;
}
.person h4{
font-size: 1.1rem;
text-decoration: underline;
line-height: 1.5;
}
/* Footer Navigation */
.footer-navigation{
}
.footer-navigation .menu{
display: flex;
flex-wrap: wrap;
align-items: center;
}
.footer-navigation .menu .menu-item{
padding: 0.25rem 0;
width: 50%;
}
.footer-navigation .menu .menu-item a{
font-size: 1rem;
font-weight: 400;
transition: all 0.4s ease;
}
.footer-navigation .menu .menu-item:hover a{
margin-left: 0.75rem;
}
.footer-navigation .menu .menu-item a::before {
content: "•";
color: var(--secondary-text);
margin-right: .5rem;
font-size: 1rem;
}
#menu-footer-menu.menu .menu-item:hover, #menu-footer-menu.menu .menu-item.active, #menu-footer-menu .menu .menu-item {
background-color: transparent;
}
/* Copyright CSS */
.copyright{
background-color: #1b1b1b;
text-align: center;
padding: 1rem 0;
color: #efefef;
}
/* Section Title Area */
.section-title{
display: flex;
justify-content: space-between;
align-items: center;
}
.section-title h2{
font-family: 'Teko', sans-serif;
}
.section-title h2 a{
color: var(--primary-color);
font-size: 3rem;
}
.section-title h2:after{
content: " ";
display: block;
border-bottom: 2px solid var(--primary-color);
}
.read_more span {
font-size: 1.25rem;
font-family: 'Teko', sans-serif;
}
.read_more{
transition: all .5s ease;
}
.read_more a{
color: var(--dark-bg);
}
.read_more:hover a{
color: var(--secondary-color);
}
.read_more a i{
transition: all .5s ease;
}
.read_more:hover a i{
transform: translate(5px, -3px)
}
/* Section Title Area Ends */
/* Main News Area */
.recent-updates, .main-news, .news{
margin-top: 2rem;
}
.recent-updates-wrapper, .main-news-wrapper, .news-wrapper{
padding: 1rem;
border-radius: 0.25rem;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
background-color: #fefefe;
}
/* Single Page */
.single{
margin: 2rem 0;
}
.single-title{
padding: 2rem;
border-radius: 0.5rem;
background-color: #fafafa;
border: 1px solid #dadada;
}
.single-meta{
text-align: center;
}
.single-meta .meta-date{
display: flex;
justify-content: center;
align-items: center;
gap: 0.25rem;
padding-bottom: 0;
}
.single-meta .meta-date i{
color: #dd5a5a;
background: none;
/* border: 2px solid #000000aa;
padding: 0.5rem; */
border-radius: 100%;
}
.single-meta .meta-date span{
color: #6d6d6d;
font-size: 0.8rem;
}
.single-content .featured-image{
padding: 1rem;
}
.single-content .advertisement{
margin: 1rem 0 1rem 1rem;
}
.title{
text-align: center;
}
.title h1{
font-size: 2.5rem;
padding: 1rem;
}
.title span{
color: #efefef;
font-size: 0.75rem;
font-weight: 500;
padding: 0.15rem 1.5rem 0 1.5rem;
border-radius: 1rem;
background: var(--primary-color);
}
.single-body{
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 2%;
padding: 1rem 0;
border-radius: 0.5rem;
background-color: #fafafa;
border: 1px solid #dadada;
}
.single-content{
flex: 74%;
}
.content{
margin: 1rem 0;
}
.content p{
padding: 1rem 2rem;
font-size: 1.2rem;
line-height: 1.6;
text-align: justify;
}
.single-literature{
display: flex;
flex-direction: row;
gap: 1.5rem;
margin: 1rem 0 5rem 0;
}
.author{
width: 25%;
padding: 0 1rem;
}
.author img{
border-radius: 50%;
padding: 0.4rem;
border: 2px solid #ccc5;
width: 10rem;
height: 10rem;
object-fit: cover;
}
.author-meta{
text-align: center;
padding: 1rem 0;
color: #3a3a3a;
}
.author-meta i{
color: #5f5f5f;
border: 2px solid #3a3a3a;
padding: 0.5rem;
border-radius: 50%;
}
.the-content p{
padding: 1rem 2rem;
font-size: 1.2rem;
line-height: 1.6;
text-align: justify;
}
/* Comment */
.comment{
background-color: #ededed;
padding: 1rem;
margin-left: 1rem;
}
.sidebar{
flex: 24%;
}
.updates{
margin-right: 1rem;
}
.updates li{
padding: 0.5rem;
margin: 0.5rem 0;
border-top: 1px solid #dedede;
border-bottom: 1px solid #dedede;
border-left: 1px solid #dedede;
border-right: 1px solid #dedede;
}
.updates li a{
color: #3a3a3a;
}
.updates li a:hover{
color: var(--secondary-color);
}
.recent-post{
padding: 0.5rem;
display: flex;
gap: 1rem;
align-items: center;
}
.featured-icon span{
font-size: 3rem;
font-weight: 700;
color: #848484;
}
.published-on{
display: flex;
align-items: center;
color: #6d6d6d;
font-size: 0.75rem;
margin: 0.5rem 0;
}
.published-on i{
margin-right: 0.25rem;
color: #bf1b2c99;
}
/* Popular Update */
.popular-update{
margin: 0 1rem 0 0;
padding: 1rem 0;
border: 1px solid #dedede;
background-color: #efefefaa;
}
.popular-update .updates{
margin-right: 0;
}
.popular-update .updates li{
padding: 0.5rem 0;
margin: 0.5rem 0;
border: none;
border-bottom: 1px solid #dedede;
}
.popular-update .updates li:last-child{
border-bottom: none;
}
.popular-post{
padding: 0.5rem;
display: flex;
gap: 1rem;
justify-content: flex-start;
align-items: center;
}
.featured-icon i{
color: #efefef;
background-color: var(--primary-color);
font-size: 1.25rem;
padding: 0.75rem;
border-radius: 50%;
}
/* Category Page */
.category{
margin: 2rem 0;
}
.category .section-title, .popular-update .section-title, .recent-update .section-title, .comment .section-title, .one-section .section-title, .related .section-title {
justify-content: center;
}
.category .section-title, .comment .section-title {
margin-bottom: 2rem;
}
.category .section-title h2{
font-size: 3rem;
}
.category-posts{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 2%;
}
.category-posts article{
flex: 23%;
}
.category-post {
margin: 1rem 0;
background-color: #fff;
border-radius: 0.5rem;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
min-height: 21.5rem;
}
.category-post .category-card img{
height: 12.5rem;
object-fit: cover;
}
.post-meta{
padding: 0.75rem;
display: flex;
flex-direction: column;
align-items: center;
}
.post-meta h4{
text-align: center;
}
/* Recent News - Home Page */
.recent-posts-wrapper{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.32%;
}
.recent-card{
flex: 32%;
background-color: #efefef;
border: 2px solid #dedede;
border-radius: 0.25rem;
margin: 0.5rem 0;
}
.post-card{
display: flex;
align-items: center;
gap: 1rem;
}
.featured-date{
display: flex;
align-items: center;
justify-content: center;
flex: 30%;
flex-direction: column;
background-color: var(--secondary-color);
color: #fefefe;
min-height: 7.5rem;
}
.featured-date span:first-child{
font-size: 1.5rem;
font-weight: 600;
}
.recent-card-meta{
text-align: center;
}
.recent-card-meta span{
font-size: 0.75rem;
line-height: 1;
border-radius: 1rem;
padding: 0.1rem 1.25rem;
color: #fefefe;
background-color: var(--primary-color);
}
.recent-card-meta h4{
margin-top: 0.5rem;
}
/* News Featured */
.all-news{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 2%;
margin: 2rem 0;
}
.news-featured{
flex: 23%;
position: relative;
}
.news-featured > a {
display: block;
overflow: hidden;
height: 360px;
}
.bg-overlay{
height: 100%;
}
.bg-overlay img{
height: 100%;
object-fit: cover;
}
.news-featured::before {
height: 100%;
width: 100%;
background: linear-gradient(to bottom,rgba(0,0,0,.2) 30%,#000 100%);
left: 0;
bottom: -1px;
position: absolute;
content: "";
border-radius: 3px;
z-index: 1;
}
.news-featured-title {
position: absolute;
text-align: center;
width: 100%;
bottom: 0;
padding-bottom: 1rem;
z-index: 1;
color: #fff;
}
.news-featured-title h3{
padding: 0 1rem;
margin: 1rem 0;
text-align: center;
transition: all .4s ease;
}
.news-featured a:hover > .news-featured-title h3{
color: var(--primary-color);
}
.news-featured-title span, .post-title span, .post-meta > span{
font-size: 0.75rem;
line-height: 1;
border-radius: 1rem;
padding: 0.1rem 1.25rem;
color: #fefefe;
background-color: var(--primary-color);
}
.post-data{
text-align: center;
}
.post-data > span{
border: 2px solid var(--primary-color);
font-size: 0.75rem;
line-height: 1;
border-radius: 1rem;
padding: 0 1.25rem;
margin-bottom: 1rem;
color: var(--primary-color);
background-color: #fefefe;
}
.news-featured-title .published-on {
justify-content: center;
}
.post-title .published-on {
justify-content: flex-start;
}
.news-featured-title .published-on span {
border-radius: 0;
padding: 0;
color: #dedede;
background-color: transparent;
}
.post-title .published-on span {
border-radius: 0;
padding: 0;
color: #7a7a7a;
background-color: transparent;
}
/* post-with-circular-image */
.post-with-circular-image{
padding: 1rem 0 0 0;
}
.post-with-circular-image .circular-posts, .two-sections .circular-posts{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1rem;
padding: 2.5rem 0;
}
.post-with-circular-image .circular-posts .post-circular{
width: 25%;
position: relative;
padding: 1.5rem 0;
}
.two-sections .circular-posts .post-circular{
width: 50%;
position: relative;
padding: 1.5rem 0;
}
.post-with-circular-image .circular-posts .post-circular .circle-image{
text-align: center;
position: absolute;
left: 4rem;
top: 0;
}
.two-sections .circular-posts .post-circular .circle-image{
text-align: center;
position: absolute;
left: 7rem;
top: 0;
}
.post-with-circular-image .circular-posts .post-circular .circle-image img, .two-sections .circular-posts .post-circular .circle-image img{
width: 10rem;
height: 10rem;
border-radius: 50%;
object-fit: cover;
padding: 0.25rem;
border: 3px solid #32323211;
background-color: #fefefe;
}
.post-data{
margin-top: 2rem;
width: 100%;
padding: 7.5rem 0 1rem 0;
border: 2px solid #32323211;
border-radius: 1rem;
}
.post-data h3{
font-size: 1.3rem;
line-height: 1.4;
text-align: center;
min-height: 3.25rem;
}
.two-sections .post-data h3{
padding: 0.5rem 1.5rem;
}
.post-circular .post-data .published-on {
justify-content: center;
margin-top: 0.5rem;
}
/* Featured News */
.featured-news{
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 1.5rem;
padding: 0.5rem;
}
.featured-news .news{
width: 31.9%;
margin-top: 0.5rem;
padding: 1.5rem 0.5rem;
border: 2px solid #3232320b;
border-radius: 1rem;
box-shadow: rgba(0, 0, 0, 0.03) 0px 1px 2px 0px;
}
.featured-news .news .features-news-image{
text-align: center;
}
.featured-news .news .features-news-image img {
width: 100%;
height: 13.5rem;
border-radius: 0.75rem;
object-fit: cover;
}
.feat-details{
min-height: 6.25rem;
}
/* Notice Area */
.notices{
display: flex;
flex-wrap: wrap;
gap: 2%;
}
.notice{
flex: 32%;
margin: 0.75rem 0;
padding: 1rem;
border: 2px solid #dedede;
border-radius: 1rem;
transition: all 0.4s ease;
}
.notice:hover{
margin: 0.25rem 0 0.75rem 0;
}
.notice .featured-icon img {
width: 6rem;
height: 6rem;
object-fit: cover;
border-radius: 50%;
transition: all 0.4s ease;
padding: 0.25rem;
border: 2px solid #32323211;
}
/* .notice .featured-icon i {
color: #efefef;
background-color: var(--secondary-color);
font-size: 1.25rem;
padding: 0.75rem;
border-radius: 50%;
transform: rotate(30deg);
transition: all 0.4s ease;
}
.notice:hover .featured-icon i {
transform: rotate(0deg);
} */
.post-title h3{
font-size: 1.25rem;
line-height: 1.5;
margin-top: 1rem;
}
/* Advertisement */
.sidebar .advertisement{
margin-right: 1rem;
}
/* Sidebar Nav */
#main{
transition: 0.5s;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
z-index: 4;
display: none;
cursor: url('../img/x-regular-24.png'), auto;
}
.sidebar-nav {
height: 100%;
width: 280px;
display: none;
position: fixed;
z-index: 5;
top: 0;
right: 0;
background-color: #eaeaea;
overflow-x: hidden;
box-shadow: -5px 0 5px 0.5px #292929a8;
}
.slide-left{
-webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes slide-left {
0% {
-webkit-transform: translateX(300px);
transform: translateX(300px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slide-left {
0% {
-webkit-transform: translateX(300px);
transform: translateX(300px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.slide-right{
-webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes slide-right {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(300px);
transform: translateX(300px);
}
}
@keyframes slide-right {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(300px);
transform: translateX(300px);
}
}
.sidebar-logo{
display: flex;
justify-content: space-between;
padding: 0.5rem 0.5rem;
margin-bottom: 2rem;
}
.sidebar-logo i{
margin-top: 1rem;
color: #efefef;
background-color: var(--primary-color);
padding: 0.3rem;
border-radius: 50%;
}
.sidebar-nav .menu{
display: block;
}
.sidebar-nav .menu-item{
border-bottom: 1px solid #ccc;
}
.sidebar-nav .menu-item a{
color: #1b1b1b;
}
.sidebar-nav .menu-item.active a, .sidebar-nav .menu-item:hover a{
color: #efefef;
}
.close-sidebar button:hover, .close-sidebar button:focus{
background-color: transparent;
}
/* Pagination Starts */
.pagination-container .pagination{
display: flex;
justify-content: center;
align-items: center;
padding: 2rem 0;
}
.pagination-container .pagination .page-numbers {
color: #efefef;
background-color: var(--primary-color);
border-radius: 100%;
margin-right: .2rem;
width: 1.5rem;
height: 1.5rem;
padding: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
}
.pagination-container .pagination .page-numbers.current, .pagination-container .pagination .page-numbers.dots{
color: #efefef;
background-color: #2d2d2d;
border: 2px solid #ccc;
}
.pagination-container .pagination .page-numbers:first-child, .pagination-container .pagination .page-numbers:last-child{
color: #2d2d2d;
background-color: #efefef;
border: 2px solid #ccc;
}
/* Pagination Ends */
/* 3 Sections of News */
.news-sections{
display: flex;
justify-content: space-between;
align-items: start;
flex-wrap: wrap;
gap: 3%;
}
.news-sections .one-section{
flex: 30%;
}
.news-sections .news-wrapper{
flex: 64%;
}
.news-sections .chhoto-mitho{
flex: 30%;
}
.one-section{
background-color: #fefefe;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.one-section-more{
padding: 1rem;
}
.one-section-more li{
padding: 0.5rem 0;
margin: 0.5rem 0;
border-bottom: 1px solid #dadada;
}
.one-section-more li:last-child{
border-bottom: none;
}
.one-section-more li a{
display: flex;
align-items: center;
font-size: 1.25rem;
line-height: 1.5;
font-weight: 600;
}
.one-section-more li a i{
color: #efefef;
background-color: var(--secondary-color);
padding: 0.25rem;
border-radius: 50%;
margin-right: 1rem;
}
.chhoto-mitho{
padding: 1rem;
border-radius: 0.25rem;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
background-color: #fefefe;
}
.chhoto .mitho{
border-bottom: 1px solid #32323211;
margin: 0.6rem 0;
padding: 0.6rem 0;
}
.chhoto .mitho:last-child{
border-bottom: none;
}
.mitho a{
display: flex;
align-items: center;
gap: 1rem;
}
.mitho a .mitho-image img{
width: 6rem;
height: 6rem;
object-fit: cover;
border-radius: 50%;
padding: 0.25rem;
border: 2px solid #32323211;
}
.mitho-data h3{
font-size: 1.2rem;
line-height: 1.4;
margin-bottom: 0.5rem;
}
/* Skip Ad Modal (background) */
.skipAd {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.8);
}
/* Modal Content/Box */
.skip-ad-content {
background-color: #fefefe;
margin: 10% auto auto auto;
padding: 0.5rem;
border-radius: 1.5rem;
border: 1px solid #888;
width: 50%; /* Could be more or less, depending on screen size */
}
/* Popup */
.skip-ad-header {
display: flex;
-ms-flex-align: start;
align-items: center;
-ms-flex-pack: justify;
justify-content: flex-end;
padding: 0 1.5rem 1rem 0;
border-bottom: 1px solid #e9ecef;
border-top-left-radius: .3rem;
border-top-right-radius: .3rem;
}
.skip-ad-header h3{
font-size: 1.5rem;
font-weight: 600;
}
.close-btn {
background: #bf1b2c;
border: none;
border-radius: 1rem;
padding: .25rem 1rem;
display: flex;
align-items: center;
color: #e9ecef;
transition: all .3s ease-in-out;
}
.close-btn:hover {
background: #3b0d0d;
}
/* Inside Content Ad */
.content-ad{
position: relative;
text-align: center;
padding: 1rem;
}
.content-ad img{
padding: 0;
}
.content-ad span{
font-size: 0.75rem;
color: #5c5c5c;
}
.home-center-square-ad{
display: flex;
justify-content: space-between;
gap: 1rem;
}
.center-square-ad{
width: calc(33.33% - 1rem);
}
@media only screen and (max-width: 1200px) {
.container{
width: 990px;
}
}
@media only screen and (max-width: 992px) {
.container{
width: 96%;
}
.menu-bar .menu{
display: none;
}
.mobile-logo{
display: flex;
justify-content: center;
padding: 1rem 1rem 0 1rem;
}
.mobile-logo img{
max-height: 4rem;
}
.main-header .logo{
display: none;
}
.social {
gap: .1rem;
}
.social li {
margin-right: 0.25rem;
}
.social li i {
font-size: 1rem;
padding: .25rem;
}
.search-form .form-group input {
width: 6rem;
padding: 0.75rem;
height: 2rem;
border-radius: 0.5rem;
}
.search-btn {
color: #efefef;
padding: 0.4rem 0.45rem;
background-color: var(--primary-color);
border-radius: 0.5rem;
margin-left: -0.9rem;
transition: all .4s ease;
}
.breaking-title h2 {
color: #3a3a3a;
font-size: 1.75rem;
padding: 0.5rem 1rem;
}
.breaking-image img {
width: 75%;
}
.breaking-excerpt {
display: block;
text-align: center;
}
.post-title h3 {
font-size: 1.15rem;
}
.notice {
min-height: 12rem;
}
.news-featured {
flex: 48%;
margin: 0.5rem 0;
}
.news-sections .one-section {
margin: 1rem 0;
flex: 30%;
}
.footer {
flex-direction: row;
gap: 2rem;
}
.category-posts article{
flex: 46%;
}
.title h1 {
font-size: 1.75rem;
padding: 0 0 1rem 0;
}
.comment{
margin-left: 0;
margin-bottom: 1rem;
}
.single-content .advertisement{
margin: 1rem 0 1rem 0;
}
.updates {
margin-right: 0;
}
.popular-update {
margin: 0 0 0 0;
}
.notice {
flex: 48%;
}
}
@media only screen and (max-width: 600px) {
.container{
width: 96%;
}
.menu-bar .menu{
display: none;
}
.date-today{
display: none;
}
.mobile-logo .date-today{
display: block;
}
.mobile-logo{
display: block;
padding: 1rem 1rem 0 1rem;
}
.mobile-logo img{
max-height: 4rem;
}
.main-header .logo{
display: none;
}
.social {
gap: .1rem;
}
.social li {
margin-right: 0.25rem;
}
.social li i {
font-size: 1rem;
padding: .25rem;
}
.search-form .form-group input {
width: 6rem;
padding: 0.75rem;
height: 1.5rem;
border-radius: 0.5rem;
}
.search-btn {
color: #efefef;
padding: 0.4rem 0.45rem;
background-color: var(--primary-color);
border-radius: 0.5rem;
margin-left: -0.9rem;
transition: all .4s ease;
}
.breaking-title h2 {
color: #3a3a3a;
font-size: 1.5rem;
padding: 0.5rem 1rem;
}
.breaking-image img {
width: 90%;
}
.breaking-excerpt {
display: none;
}
.post-title h3 {
font-size: 1.15rem;
}
.notice {
min-height: 9rem;
}
.section-title h2 a {
font-size: 2rem;
}
.news-featured {
flex: 100%;
margin: 0.5rem 0;
}
.news-sections .one-section {
margin: 1rem 0;
flex: 100%;
}
.footer-container {
background-image: none;
}
.footer {
flex-direction: column;
gap: 2rem;
align-items: center;
}
.footer-navigation {
margin-left: 1.5rem;
}
.category-posts article{
flex: 46%;
}
.title h1 {
font-size: 1.75rem;
padding: 0 0 1rem 0;
}
.comment{
margin-left: 0;
margin-bottom: 1rem;
}
.single-content .advertisement{
margin: 1rem 0 1rem 0;
}
.updates {
margin-right: 0;
}
.popular-update {
margin: 0 0 0 0;
}
.notice {
flex: 100%;
}
/* Modal Content/Box */
.skip-ad-content {
margin-top: 60%;
width: 90%;
}
.single-literature {
flex-direction: column;
}
.author{
display: flex;
align-items: center;
gap: 1.5rem;
}
.author img {
width: 7.5rem;
height: 7.5rem;
}
.author-meta{
display: flex;
align-items: center;
justify-content: flex-start;
}
.author-meta span{
min-width: 5rem;
}
.featured-news .news {
width: 100%;
}
.post-with-circular-image .circular-posts .post-circular {
width: 100%;
}
.two-sections .circular-posts .post-circular {
width: 100%;
}
.post-with-circular-image .circular-posts, .two-sections .circular-posts{
flex-direction: column;
}
.two-sections .circular-posts .post-circular .circle-image {
left: 5rem;
}
.post-with-circular-image .circular-posts .post-circular .circle-image {
left: 5rem;
}
#main-menu-home{
display: inline;
}
}