@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

:root{
  --primary-color-hue: 252;
  --dark-color-lightness: 17%;
  --light-color-lightness: 95%;
  --white-color-lightness: 100%;

  --color-white: hsl(252, 30%, var(--white-color-lightness));
  --color-light: hsl(252, 30%, var(--light-color-lightness));
  --color-gray: hsl(var(--primary-color-hue), 15%, 65%);
  --color-primary: #DD1F26;
  --color-dark-primary: #2A3650;
  --color-dark-primary-dark: #463F71;
  --color-secondary: hsl(252, 100%, 90%);
  --color-success: hsl(120, 95%, 65%);
  --color-danger: hsl(0, 95%, 65%);
  --color-dark: hsl(252, 30%, var(--dark-color-lightness));
  --color-black: hsl(252, 30%, 10%);
  --color-card-color: #F5F8FF;
   --color-body: #F5F5F5;

  

  --border-radius: 2rem;
  --card-border-radius: 1rem;
  --btn-padding: 0.6rem 2rem;
  --search-padding: 0.6rem 1rem;
  --card--padding: 1rem;


  --sticky-top-left: 5.4rem;
  --sticky-top-right: -18rem;

  --margin-main-left: 18%;
  --margin-main-right: 18%;
}

body {

  font-family: 'Poppins', sans-serif;
  color: var(--color-dark);
  background: var(--color-light);
  background: var(--color-body);
}



/*========================HOMEPAGE STYLING BEGIN HERE ================*/

/*header styling begin here*/

.header-black-bar {
 background: #000000;
 height: 3.5rem;
 margin-top: -1rem;
 margin-left: -0.5rem;
 margin-right: -0.5rem;
 display: flex;
}


.header-black-bar .menu_hold {
 margin-left: var(--margin-main-left);
}


.header-black-bar .menu_hold :hover {
 color: var(--color-primary);
 transition: 0.8s ease;
}


.header-black-bar .menu_hold nav {
  font-size: 0.7rem;
  padding-top: 1rem;
}


.header-black-bar .menu_hold nav a {
 color: var(--color-white);
 text-decoration: none;
 padding: 0.5rem;
}

.header-black-bar .menu_hold nav a i {
  font-size: 1.3rem;
}


.header-black-bar .subscribe-singinbutton-div {
  display: flex;
  margin-left: 4%;
}

.header-black-bar .subscribe-singinbutton-div  button{
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  height: 1.7rem;
  text-align: center;
  border-radius: 5rem;
  margin-top: 1.2rem;
  padding: 0.5rem;
  cursor: pointer;
  width: 5rem;
}

.header-black-bar .subscribe-singinbutton-div .signin-div {
    margin-top: 1.2rem;
    margin-left: 7%;
    width: 5rem;

}
.header-black-bar .subscribe-singinbutton-div .signin-div a {
  text-decoration: none;
  color: var(--color-card-color);
  font-size: 0.8rem;
  font-weight: bold;
}



header .revenue-space {
  background: pink;
  height: 8rem;
  margin: 0% 20% 0% 20%;
  margin-top: 0.5%;
}


header .header-main-section {
  margin-left: var(--margin-main-left);
  margin-right: var(--margin-main-right);
  background: var(--color-white);
  margin-top: 1rem;
  height: 9rem;
   border-left: solid rgb(218, 217, 217) 0.02rem;
    -moz-box-shadow: 0 0 3px #ccc;
    -webkit-box-shadow: 0 0 3px #ccc;
    box-shadow: 0 0 3px #ccc;
}

header .header-main-section .inner-main-holder {
  display: flex;
  height: 6.5rem;
  background: ;
  border-bottom: solid rgb(192, 189, 189) 0.02rem;
}


header .header-main-section .inner-main-holder .inner1 {
 background:;
 height: 6.5rem;
 flex: 1.2;
}

header .header-main-section .inner-main-holder .inner2 {
  background:;
 height: 6.5rem;
 flex: 2.5;
}

header .header-main-section .inner-main-holder .inner3 {
 background:;
 height: 5rem;
 flex: 1;
}
header .header-main-section .inner-main-holder .inner4 {
 background: ;
 height: 5rem;
 flex: 1;
}



header .header-main-section .inner-main-holder .inner1 img {
  width: 70%;
  height: 35%;
  margin-top: 15%;
  margin-left: 5%;
}


header .header-main-section .inner-main-holder .inner2 .search-div {
   border: solid rgb(192, 189, 189) 0.02rem;
   height: 30%;
   width: 60%;
   margin-top: 5%;
   margin-left: 25%;
   padding: 0.5rem;
   border-radius: 10rem;
}


header .header-main-section .inner-main-holder .inner2 .search-div button {
  font-size: 1.4rem;
  border: none;
  background: var(--color-white);
  cursor: pointer;
}

header .header-main-section .inner-main-holder .inner2 .search-div button i {
  font-size: 1.5rem;
  color: rgb(192, 189, 189);
}

header .header-main-section .inner-main-holder .inner2 .search-div input {
   height: 100%;
   width: 80%;
   border: none;
   border-radius: 10rem;
}


header .header-main-section .inner-main-holder .inner2 .search-div input:focus {
  outline: none;
}



header .header-main-section .inner-main-holder .inner3 .holder {
  display: flex;
  margin-left: 5%;
  margin-top: 15%;
}


header .header-main-section .inner-main-holder .inner3 .holder a {
  padding: 0 0.5rem 0 0.5rem;
}

header .header-main-section .inner-main-holder .inner3 .holder i {
  font-size: 1.4rem;
  color: var(--color-black);
}


header .header-main-section .inner-main-holder .inner4 .holder {
  padding: 1rem;
  text-align: center;
}


header .header-main-section .inner-main-holder .inner4 .holder span {
   font-size: 0.7rem;
   margin-top: 1rem;
}


header .header-main-section .inner-main-holder .inner4 .holder p {
   font-weight: bold;
   font-size: 0.9rem;
}

header .header-main-section .main-menu-div {
 padding-left: 1%;
}

header .header-main-section .main-menu-div a {
  text-decoration: none;
  color: var(--color-black);
  padding-left: 1rem;
  font-size: 0.9rem;
}
/*header styling begin end*/





/*****Main section styling Begin here***/
.main-div-container {
  margin-left: var(--margin-main-left);
  margin-right: var(--margin-main-right);
  display: flex;
  margin-top: 0.6rem;
}


.main-div-container .main-section {
  background: ;
  flex: 2.1;
/*  border-left: solid rgb(218, 217, 217) 0.02rem;
  -moz-box-shadow: 0 0 3px #ccc;
  -webkit-box-shadow: 0 0 3px #ccc;
   box-shadow: 0 0 3px #ccc;*/
}


.main-div-container .leftside-bar-section {
  background: green;
  margin-left: 0.6rem;
  flex: 1;
}


.main-div-container .main-section .slide-section {
  background: var(--color-white);
    padding-bottom: 1rem;
      border-left: solid rgb(218, 217, 217) 0.02rem;
  -moz-box-shadow: 0 0 3px #ccc;
  -webkit-box-shadow: 0 0 3px #ccc;
   box-shadow: 0 0 3px #ccc;
}


.main-div-container .main-section .slide-section .caption {
  background: ;
  height: 12%;
  display: flex;
}


.main-div-container .main-section .slide-section .caption .inner1 {
  background: ;
  height: 100%;
 flex: 7;
}





.main-div-container .main-section .slide-section .caption .inner2 {
  background: ;
  height: 100%;
  flex: 1;
}


.main-div-container .main-section .slide-section .caption .inner1 a {
  text-decoration: none;
  color: var(--color-black);
}

.main-div-container .main-section .slide-section .caption .inner1 h6 {
  background: var(--color-white);
  padding: 0.1rem;
  border: solid var(--color-gray) 0.05rem;
  width: 20%;
  margin-top: 1rem;
  margin-left: 3%;
  text-align: center;
  font-size: 0.6rem;
  border-radius: 1rem;
}



.main-div-container .main-section .slide-section .caption .inner2 p {
  font-size: 0.6rem;
  margin-top: 1.1rem;
  margin-left: 30%;
}

.main-div-container .main-section .slide-section article {
  margin-left: 3%;
  background: ;
  margin-top: 0rem;
  margin-right: 3%;
  padding-top: 0rem;
  margin-top: -2.5rem;
}


.main-div-container .main-section .slide-section article h1 {
   font-size: 1.7rem;
   font-weight: bold;
}


.main-div-container .main-section .slide-section article .image-section {
  background:;
  height: 15rem;
  margin-top: -1.5rem;
  display: flex;
}

.main-div-container .main-section .slide-section article .image-section .inner1 {
 background: ;  
 height: 15rem;
 flex: 1.2;
}


.main-div-container .main-section .slide-section article .image-section .inner2 {
 background:;  
 height: 15rem;
 flex: 1;
 padding-left: 2%;
}


.main-div-container .main-section .slide-section article .image-section .inner1 img {
  border-radius: 2%;
}


.main-div-container .main-section .slide-section article .image-section .inner2 p {
  margin-top: 0rem;
  font-weight: bold;
}


.main-div-container .main-section .second-grid-sectiond {
  background: ;
  margin-top: 0.6rem;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 0.3rem 0.4rem;
}



.main-div-container .main-section .second-grid-sectiond a {
  text-decoration: none;
  color: var(--color-black);
}

.main-div-container .main-section .second-grid-sectiond .each-article {

   background: var(--color-white);
   display: flex;
   height: 8rem;
   width: 92%;
  border-left: solid rgb(218, 217, 217) 0.02rem;
  -moz-box-shadow: 0 0 3px #ccc;
  -webkit-box-shadow: 0 0 3px #ccc;
   box-shadow: 0 0 3px #ccc;
   padding: 0.8rem;
}

.main-div-container .main-section .second-grid-sectiond .each-article:hover {
  background: var(--color-body);
   transition: 0.8s ease;
}


.main-div-container .main-section .second-grid-sectiond .each-article .inner1 {
   background:;
   height: 8rem;
   flex: 1;
 
}



.main-div-container .main-section .second-grid-sectiond .each-article .inner2 {
   background:;
   height: 8rem;
   flex: 2.2;
}



.main-div-container .main-section .second-grid-sectiond .each-article .inner1 img{
  width: 95%;
  border-radius: 0.5rem;
  height: 80%;
}




.main-div-container .main-section .second-grid-sectiond .each-article .inner2 .first-bar{
  background:;
  height: 1.5rem;
  padding: 0rem;
  display: flex;
}

.main-div-container .main-section .second-grid-sectiond .each-article .inner2 .first-bar .innerside1{
  height: 1.5rem;  
  background:;
  flex: 1;
}

.main-div-container .main-section .second-grid-sectiond .each-article .inner2 .first-bar .innerside2{
  height: 1rem;  
  background: ;
  flex: 1.7;
}

.main-div-container .main-section .second-grid-sectiond .each-article .inner2 .first-bar .innerside1 h6{
 border: solid gray 0.1rem;
 font-weight: 1000;
 font-size: 0.6rem;
 border-radius: 1rem;
 padding: 0.1rem 0rem;
 margin: 0rem;
 text-align: center;
 margin-left: 10%;
}

.main-div-container .main-section .second-grid-sectiond .each-article .inner2 h2{
  font-size: 0.9rem;
  margin-left: 2%;
}

.main-div-container .main-section .second-grid-sectiond .each-article .inner2 .first-bar .innerside2 h6{
 font-weight: 500;
 font-size: 0.6rem;
 padding: 0.1rem 0rem;
 margin: 0rem;
 margin-left: 50%;
}




main .revenue-mid-main {
  background: pink;
  height: 15%;
  margin-top: 1rem;
}



main .third-section-main-holder .third-section-holder1 {
 background: ;
 margin-top: 1rem;
 display: flex;
 height: 31rem;
}


main .third-section-main-holder .third-section-holder1  .inner-div1{
 background:;
 flex: 1;
}


main .third-section-main-holder .third-section-holder1  .inner-div2{
 background:;
 height: 28rem;
 flex: 1;
}


main .third-section-main-holder .third-section-holder1  .inner-div1 article{
  background: var(--color-white);
  height: 100%;
  width: 97%;
  border-radius: 0.4rem 0.4rem 0rem 0rem;
    border-left: solid rgb(218, 217, 217) 0.02rem;
  -moz-box-shadow: 0 0 3px #ccc;
  -webkit-box-shadow: 0 0 3px #ccc;
   box-shadow: 0 0 3px #ccc;
}

main .third-section-main-holder .third-section-holder1  .inner-div1 article .div-top{
 background:;
 height: 54%;
 width: 100%;
}

main .third-section-main-holder .third-section-holder1  .inner-div1 article .div-top img{
  height: 100%;
  width: 100%;
  border-radius: 0.4rem 0.4rem 0rem 0rem;
}



main .third-section-main-holder .third-section-holder1  .inner-div1 article .div-down  {

}

main .third-section-main-holder .third-section-holder1  .inner-div1 article .div-down h6 {
  
  background: var(--color-white);
  padding: 0.1rem;
  border: solid var(--color-gray) 0.05rem;
  width: 20%;
  margin-left: 5%;
  text-align: center;
  font-size: 0.6rem;
  border-radius: 1rem;
}


 main .third-section-main-holder .third-section-holder1  .inner-div1 article .div-down h2 {
  font-size: 0.9rem;
  padding: 0rem 1rem;
  font-weight: bold;
 }

 main .third-section-main-holder .third-section-holder1  .inner-div1 article .div-down p {
    font-size: 0.8rem;
    padding: 0rem 1rem;
 }


 main .third-section-main-holder .third-section-holder1  .inner-div1 article span {
  margin-left: 5%;
  font-size: 0.6rem;
 }

 main .third-section-main-holder .third-section-holder1  .inner-div2 {

 }

  main .third-section-main-holder .third-section-holder1  .inner-div2 {
  
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   grid-gap: 1.08rem 0.4rem;
 }



 
 main .third-section-main-holder .third-section-holder1  .inner-div2 a {
  text-decoration: none;
  color: var(--color-black);
 
}

 main .third-section-main-holder .third-section-holder1  .inner-div2 .each-article {

   background: var(--color-white);
   display: flex;
   height: 8rem;
   width: 92%;
  border-left: solid rgb(218, 217, 217) 0.02rem;
  -moz-box-shadow: 0 0 3px #ccc;
  -webkit-box-shadow: 0 0 3px #ccc;
   box-shadow: 0 0 3px #ccc;
   padding: 0.8rem;
  
}

 main .third-section-main-holder .third-section-holder1  .inner-div2 .each-article:hover {
  background: var(--color-body);
   transition: 0.8s ease;
}


 main .third-section-main-holder .third-section-holder1  .inner-div2 .each-article .inner1 {
   background:;
   height: 8rem;
   flex: 1;
 
}



 main .third-section-main-holder .third-section-holder1  .inner-div2 .each-article .inner2 {
   background:;
   height: 8rem;
   flex: 2.2;
}



 main .third-section-main-holder .third-section-holder1  .inner-div2 .each-article .inner1 img{
  width: 95%;
  border-radius: 0.5rem;
  height: 80%;
}




 main .third-section-main-holder .third-section-holder1  .inner-div2 .each-article .inner2 .first-bar{
  background:;
  height: 1.5rem;
  padding: 0rem;
  display: flex;
}

 main .third-section-main-holder .third-section-holder1  .inner-div2 .each-article .inner2 .first-bar .innerside1{
  height: 1.5rem;  
  background:;
  flex: 1;
}

 main .third-section-main-holder .third-section-holder1  .inner-div2 .each-article .inner2 .first-bar .innerside2{
  height: 1rem;  
  background: ;
  flex: 1.7;
}

 main .third-section-main-holder .third-section-holder1  .inner-div2 .each-article .inner2 .first-bar .innerside1 h6{
 border: solid gray 0.1rem;
 font-weight: 1000;
 font-size: 0.6rem;
 border-radius: 1rem;
 padding: 0.1rem 0rem;
 margin: 0rem;
 text-align: center;
 margin-left: 10%;
}

 main .third-section-main-holder .third-section-holder1  .inner-div2 .each-article .inner2 h2{
  font-size: 0.9rem;
  margin-left: 2%;
}

 main .third-section-main-holder .third-section-holder1  .inner-div2 .each-article .inner2 .first-bar .innerside2 h6{
 font-weight: 500;
 font-size: 0.6rem;
 padding: 0.1rem 0rem;
 margin: 0rem;
 margin-left: 50%;
}

main .fouth-section{
 margin-top: 1.5rem;
}


main .fouth-section h2{
 font-size: 1.1rem;
} 


main .fouth-section .content-holder {
  display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 0.3rem 0.1rem;
   background: ;
   height: 20.5rem;
}




main .fouth-section .content-holder article{
  background: var(--color-white);
  height: 85%;
  width: 97%;
  border-radius: 0.4rem 0.4rem 0rem 0rem;
    border-left: solid rgb(218, 217, 217) 0.02rem;
  -moz-box-shadow: 0 0 3px #ccc;
  -webkit-box-shadow: 0 0 3px #ccc;
   box-shadow: 0 0 3px #ccc;
}




main .fouth-section .content-holder article .div-top{
 background: ;
 height: 48%;
 width: 100%;
}



main .fouth-section .content-holder article .div-top img{
  height: 100%;
  width: 100%;
  border-radius: 0.4rem 0.4rem 0rem 0rem;
}




main .fouth-section .content-holder article .div-down h6 {
  
  background: var(--color-white);
  border: solid var(--color-gray) 0.05rem;
  width: 30%;
  margin-left: 5%;
  text-align: center;
  font-size: 0.6rem;
  border-radius: 1rem;
}


main .fouth-section .content-holder article .div-down h2 {
  font-size: 0.8rem;
  padding: 0rem 0.5rem;
  font-weight: bold;
 }
 


main .fouth-section .content-holder article span {
  margin-left: 5%;
  font-size: 0.6rem;
 }



/*****Main section styling stop***/
.most_read-container {
  
  background: var(--color-white);
  height: 10%;
  margin-top: -1rem;
  
}


.most_read-container .header {
 border-bottom: solid var(--color-gray) 0.1rem;
}

.most_read-container .header a{
  text-decoration: none;
}

.most_read-container .header .text-holder{
  background:;
  width: 50%;
  height: 2.5rem;
  margin: auto;
  margin-top: 1rem;
  border-bottom: solid DarkBlue 0.2rem;
}

.most_read-container .header h2 {
  font-weight: 100;
  text-align: center;
  font-size: 1rem;
  padding-top: 0.4rem;
  color: DarkBlue;
}


/**************Righ Sider  begin here*********************

/**************Righ Sider stop*********************

/*========================HOME PAGE HEADER STYLING STOP ================*/