:root {
  --frst: #363062;
  --scnd: #4d4c7d;
  --third: #f99417;
  --four: #f5f5f5;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none !important;
}

body {
  background-color: var(--frst);
}

.fw7 {
  font-weight: 700;
}

.side-navbar {
  width: 250px;
  height: 100%;
  position: fixed;
  margin-left: -300px;
  background-color: var(--four);
  transition: 0.5s;
}

.nav-link:active,
.nav-link:focus,
.nav-link:hover {
  background-color: #ffffff26;
}

.my-container {
  transition: 0.4s;
}

.active-nav {
  margin-left: 0;
}

/* for main section */
.active-cont {
  margin-left: 250px;
}

#menu-btn {
  background-color: #272421;
  color: #fff;
  margin-left: -50px;
}

.my-container input {
  border-radius: 2rem;
  padding: 2px 20px;
}

.profileImg {
  clip-path: circle(50px);
}

.custom-nav-link {
  cursor: pointer;
  color: white;
  text-align: center;
  font-weight: 600;
  border-radius: 4px;
  background: #4b3333;
  padding: 7px;
  margin: 5px 10px;
}

.mainBigBox {
  background-color: white;
  height: 585px;
  width: 485px;
  margin: 0px 16px 20px;
  overflow: hidden;
}

.firstBigBox {
  background-color: grey;
  height: 215px;
  width: 260px;
  margin: 2px 1px;
  overflow: hidden;
}

.secondLongBox {
  height: 350px;
  width: 318px;
  overflow: hidden;
  background-color: grey;
  margin: 0 8px;
}

.ad-one {
  height: 500px;
  background-color: grey;
  margin: 5px;
  width: 200px;
}

.ad-two {
  height: 100px;
  background-color: grey;
  margin: 5px;
  width: 80%;
}

.recentPostBox {
  border: 2px solid;
  height: 200px;
  min-width: 200px;
  margin: 5px;
  background-color: grey;
}

.topnavbutton {
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 700;
}

.footer {
  background-color: #eaeaea;
}

.loginForm {
  width: 100%;
  max-width: 350px;
  background: red;
  padding: 22px;
  border-radius: 5px;
}

.registerForm {
  width: 100%;
  max-width: 500px;
  background: red;
  padding: 22px;
  border-radius: 5px;
}

.loginBtn {
  background: black;
  color: white;
  padding: 10px;
  width: 100%;
  font-size: 17px;
  border-radius: 6px;
}

.secondSectionBg {
  background-color: #f7f7f7;
  height: 220px;
  padding-top: 25px;
}

.navarrow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  background: grey;
  height: 50px;
  color: white;
  border-radius: 50%;
  margin: 20px;
}

.datetext {
  font-size: 10px;
  font-weight: 600;
  padding-bottom: 15px;
}

.sizetwo {
  font-size: 14px;
  font-weight: 600;
}

.footerblock {
  width: 25%;
  max-width: calc(25% - 5px);
  padding: 20px;
}

.bighead {
  font-size: 18px;
  font-weight: 700;
}

.bighead1 {
  font-size: 30px;
  font-weight: 700;
}

.footsocial {
  height: 50px;
  width: 50px;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  color: white;
}

.celeb-block-container {
  display: grid;
  grid-template-columns: auto auto;
  margin-top: 10px;
  padding: 0px 50px;
}

.section3-end {
  padding: 0 90px;
  border-top: 1px solid;
  justify-content: space-between;
  display: flex;
  border-bottom: 1px solid;
}

.section3-end-bits {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  font-weight: 700;
  font-size: 14px;
}

.section3-end-bits1 {
  flex: 1;
  display: flex;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
}

.section3-end-bits2 {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.loginboxtitle {
  font-size: 35px;
  color: #000000;
  font-weight: 700;
  border-bottom: 2px solid #00000030;
  letter-spacing: 10px;
}

.showArticleTitle {
  font-size: 35px;
  width: 50%;
  color: #6c6a6a;
  font-weight: 700;
  padding: 30px 20px;
  text-align: center;
}

.authorArticleSection {
  text-align: center;
  margin-bottom: 5vh;
  border-bottom: 1px solid #00000020;
}

#articleShowDiv {
  min-height: 60dvh;
}

.post-div-box {
  padding: 20px 50px;
  max-width: 995px;
}

.smallSocial {
  padding: 5px 10px;
  color: red;
}

.menuSideBar {
  translate: -260px;
  position: fixed;
  padding: 10px;
  top: 0;
  left: 0;
  background: #f7f7f7;
  height: 100dvh;
  width: 250px;
  transition: translate ease-in-out 0.5s;
  box-shadow: 0px 0px 14px 0px grey;
}

.containMenuSidebar {
  width: 100dvw;
  height: 100dvh;
  background: #0000008a;
  position: fixed;
  top: 0;
  overflow: hidden;
}

.dt-length label {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

.ownarticle {
  color: black;
  font-size: 21px;
  background: rgb(182, 182, 182);
  height: 50px;
  width: 50px;
  padding: 9px;
  text-align: center;
  border-radius: 34px;
  opacity: 0.5;
  position: relative;
  top: 30px;
}

.panel-custom {
  margin: 1rem 3rem;
  border: 1px solid lightgrey;
  padding: 30px;
  background: white;
  box-shadow: 0 0 6px -2px grey;
}

.page-back-custom {
  background: whitesmoke;
  width: 100%;
  min-height: 100dvh;
}

.custom-admin-navbar {
  background: red;
  box-shadow: 0 0 10px 1px;
}

.b1FooterImg {
  height: 200px;
  width: 286px;
  background-color: #dedede;
}

.b1FooterImg1 {
  height: 305px;
  margin-bottom: 50px;
  width: 426px;
  background: #c6c6c6;
}
.b1FooterRightSideAdImg {
  height: 391px;
  margin: 33px 22px 30px;
  width: 87%;
  background: #d6d6d6;
}

.recentPostTitle {
  padding: 50px 25px 25px;
  font-size: 30px;
  font-weight: 600;
}

.exclusivecontent {
  padding: 20px;
  margin: 10px 70px;
  border: 1px solid #d6d6d6;
  box-shadow: 0 0 10px -5px;
}
.exclusivecontentsec1 {
  height: 500px;
  background-color: #e8e8e8;
}

.exclusivecontentsec1s1 {
  height: 175px;
  width: 340px;
  margin: 0 20px;
  background-color: #f0f0f0;
}

.adsec {
  background-color: #cbcbcb;
  height: 125px;
}

.adsecContainer {
  padding: 63px 150px;
  height: 240px;
  background-color: #ffffff;
}

.boxset10 {
  height: 90px;
  background: grey;
  width: 90px;
}

span.exclusivetag {
  background: red;
  color: white;
  padding: 2px 6px;
  font-size: 11px;
  margin: 0px 4px;
  border-radius: 4px;
  font-weight: 600;
  border: 1px solid #7e1b1b;
}

.mainBigBoxContent {
  position: relative;
  padding: 219px 25px 11px;
  color: white;
  top: -450px;
  max-height: 464px;
  overflow: hidden;
  z-index: 18;
  background-image: linear-gradient(0deg, #000000 16%, #ffffff00 71%);
  font-size: 18px;
}

.mainBigBoxImg {
  background-size: cover;
  position: relative;
  height: 100%;
  z-index: 0;
  top: 0;
  transition: 0.4s ease scale;
}

.mainBigBox:hover .mainBigBoxImg {
  scale: 1.2;
}
.mainBigBoxContentHeading {
  font-size: 29px;
  font-weight: 600;
}

.newsmaghead {
  font-size: 70px;
  font-weight: 700;
  color: red;
}

.bixbogSide{
    font-size: 14px;
    font-weight: 600;
    padding: 5px 0px 15px;
}

.section4aBit{
    display: grid;
    grid-template-columns: auto auto;
    max-width: 350px;
    margin: 10px 10px 10px 0;
}

.secondLongBoxImg {
    position: relative;
    height: 355px;
    background-size: cover;
    top: 0;
    scale: 1;
    transition: 0.5s ease scale;
}


.secondLongBoxContent {
    position: relative;
    top: -159px;
    padding: 10px;
    color: white;
    font-weight: 600;
    font-size: 20px;
    height: 155px;
    background: linear-gradient(360deg, black, transparent);
}

.secondLongBox:hover .secondLongBoxImg {
   scale:1.2;
}

.recentPostContentbox{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  height: 100%;
}

.beforeceleb1heading{
  font-size: 25px;
    font-weight: 700;
    padding: 10px 5px;
}