.header {
 padding: 0.2rem 0;
}
.header .nav .header-logo {
 width: 8rem;
 height: 3rem;

 background-position: center;
 background-size: contain;
}

.header .nav .header-search-icon {
 background-color: #6b4be0;
 padding: 0.5rem 0.6rem;
 border-radius: 0.3rem;
}
.header .nav ul li {
 font-size: 0.9rem;
 font-family: "Noticia Text", serif;
}
.header .nav ul li:first-child {
 color: #ce96fc;
}

.header .hambuger {
 position: absolute;
 top: 1rem;
 left: 2rem;
 width: 20px;
 height: 15px;
 display: none;
}
.inside-hamerger {
 position: absolute;
 background-color: white;
 left: 0;
 width: fit-content;
 top: 0;
 display: none;
}
.inside-hamerger ul li {
 color: black !important;
}

.hero {
 background: url(/assets/hero-bg.png) no-repeat;
 height: 53vh;
 width: 100%;
 background-position: center;
 background-size: cover;
}
.hero .content {
 height: 30vh;
 width: 55%;
}

.hero .heading {
 font-family: "Noticia Text", serif;
 font-size: 2rem;
 text-align: left;
 height: fit-content;
 line-height: 1.5;
 color: white;
}

.hero .heading span {
 color: #ce96fc;
 font-weight: 500;
}
.hero p {
 text-align: left;
 margin-top: 0.5rem;
 color: white;
 font-size: 0.9rem;
}
.hero .search-sec {
 width: 55%;
 /* margin: auto; */
}

.hero .search-sec form {
 /* border: 3px solid white; */
 border-radius: 0.4rem;
 background-color: #1b123e;
 padding-right: 0.5rem;
 padding-bottom: 0.1rem;
}
.hero .search-sec form input {
 width: 95%;
 border: none;
 outline: none;
 background: none;
 padding: 0.8rem 0.6rem;
 color: white;
 font-family: "Inter", sans-serif;
 font-size: 0.8rem;
 letter-spacing: 0.1rem;
}
.hero .search-sec form input::placeholder {
 color: white;
}

.hero .search-sec form img {
 background-color: #ce96fc;
 padding: 0.6rem;
 border-radius: 0.2rem;
 margin-top: 0.1rem;
 display: block;
 width: fit-content;
}

.home-articles {
 background: url(/assets/home-article-bg.jpg) no-repeat;
 background-size: cover;
 background-position: center;
 width: 100%;
 height: 90vh;
 margin-top: 6rem;
 margin-bottom: 3rem;
}

.home-articles .list-articles {
 width: 60%;
 margin: auto;
 grid-template-columns: repeat(2, 1fr);
 grid-gap: 1rem;
}

.home-articles .list-articles .article {
 height: 15rem;
 padding: 1rem;
 line-height: 1.5;
 font-family: "Roboto", sans-serif;
 background-color: #f4e8ff80;
}
.home-articles .list-articles .article2 {
 /* background: url(/assets/image2.png) no-repeat;
 background-position: center;
 background-size: cover; */
 object-fit: cover;
 position: relative;
}

.home-articles .list-articles .article2 .vertical-lines {
 position: absolute;
 top: -1rem;
 right: 1rem;
}

.home-articles .list-articles .article3 {
 /* background: url(/assets/image1.png) no-repeat;
 background-position: center;
 background-size: cover; */
 object-fit: cover;
 position: relative;
}

.home-articles .list-articles .article-content {
 display: none;
}

.home-articles .list-articles .article3 .vertical-lines-left {
 position: absolute;
 top: -1rem;
 left: 1rem;
}

.home-articles .list-articles article h3 {
 font-size: 1.5rem;
 margin-bottom: 0.5rem;
 text-transform: capitalize;
 font-weight: 600;
 font-family: "Roboto", sans-serif;
}
.home-articles .list-articles article p {
 font-size: 0.8rem;
 font-family: "Roboto", sans-serif;
}

.categories {
 grid-template-columns: repeat(9, 1fr);
 /* height: 5rem; */
 background-color: #1b123e;
 padding: 1.5rem 2rem;
 /* margin: auto; */
 grid-gap: 1rem;
}
.categories-sec .categories figure {
 position: relative;
 border-right: 1px solid rgba(255, 255, 255, 0.669);
 display: flex;
 justify-content: center;
 align-items: center;
 padding-bottom: 1.5rem;
 /* top: 0; */
}
.categories-sec .categories figure:last-child {
 border: none;
}
.categories-sec .categories figure img {
 display: block;
 margin: auto;
}
.categories-sec .categories p {
 font-size: 0.7rem;
 text-align: center;
 margin-top: 0.4rem;
 color: white;
 position: absolute;
 bottom: 0rem;
 margin: auto;
 text-align: center;
 margin-top: 2rem;
}

.footer {
 padding: 0.5rem 4.5rem;
 margin-top: 1rem;
}

.footer p {
 font-size: 0.75rem;
 line-height: 1.5;
}

.footer p span {
 color: #ce96fc;
}

.footer .img {
 width: 1rem;
 height: 1rem;
}

.footer ul li a {
 font-size: 0.75rem;
}

/* All Article pages */

.articles-hero-sec {
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 2rem;
 margin-top: 2rem;
 margin-bottom: 4rem;
}

.spotlight-sec1 h3 {
 font-size: 1rem;
}

.articles-hero-sec article {
 height: 29rem;
 background-color: #f4e8ff80;
 text-align: center;
 border: 1px solid rgba(219, 219, 219, 0.371);
 transition: all 0.5 ease-in-out;
}
.articles-hero-sec article:hover {
 background-color: #1b123e;
 transition: all 0.2s ease-in-out;
 color: white;
}
.articles-hero-sec article .content {
 padding: 0 1rem;
}
.articles-hero-sec article h5 {
 margin-top: 0.5rem;
 text-transform: uppercase;
 font-family: "Noticia Text", serif;
 letter-spacing: 0.1rem;
 font-size: 0.8rem;
}

.articles-hero-sec article figure {
 height: 20rem;
 /* background: url(/assets/image3.png) no-repeat;
 background-position: center;
 background-size: cover; */
 border-bottom: 4px solid white;
}
.articles-hero-sec article p {
 text-align: center;
 height: 5rem;
 overflow-y: hidden;
 line-height: 1.5;
 font-family: "Roboto", sans-serif;
 padding: 0 1rem;
}
.articles-hero-sec article a {
 display: block;
 width: fit-content;
 margin: auto;
 padding: 0.7rem 1rem;
 font-size: 0.8rem;
 margin-top: 0.5rem;
 background-color: #6b4be0;
 color: white;
 letter-spacing: 0.1rem;
 font-weight: 500;
}

/* spot light */
.spotlight-sec {
 margin-top: 1rem;
}
.spotlight-sec .spotlights {
 border-radius: 1rem;
 grid-template-columns: repeat(2, 1fr);
 height: 30rem;

 /* grid-gap: 3rem; */
}

.spotlight-sec .banner-content {
 grid-column: 1/2;
 line-height: 1.5;
 padding: 0 3rem;
 color: white;

 background: linear-gradient(
  90deg,
  rgba(71, 48, 164, 1) 0%,
  rgba(107, 75, 224, 1) 50%,
  rgba(206, 150, 252, 1) 100%
 );
}

.spotlight-sec .banner {
 grid-column: 2/3;
}

.spotlight-sec .item {
 height: 30rem;
}
.spotlight-sec .spotlights .vector {
 right: 0 !important;
 position: absolute;
 width: 13rem;
 top: 13rem;
}

.spotlight-sec .banner-content .heading {
 font-size: 4rem;
 font-weight: 500;
 margin-top: -1.5rem;
 color: white;
 font-weight: 600;
 font-family: "Noticia Text", serif;
}
.spotlight-sec .banner-content span {
 font-size: 1.5rem;
 margin-top: 0.5rem;
 display: block;
}
.spotlight-sec .banner-content .heading h5 {
 text-transform: uppercase;
 margin-top: 0.5rem;
}
.spotlight-sec .banner-content .category {
 text-transform: uppercase;
 font-family: "Noticia Text", serif;
 font-weight: 500;
 color: white;
}
.spotlight-sec .banner-content p {
 margin-top: 1rem;
 height: 14rem;
 overflow-y: hidden;
 line-height: 1.7;
 font-family: "Roboto", sans-serif;
}

.spotlight-sec .banner-content a {
 background-color: #1b123e;
 padding: 0.8rem 2rem;
 display: block;
 width: fit-content;
 font-weight: 500;
 margin-top: 0.3rem;
 text-transform: uppercase;
 font-size: 0.9rem;
 letter-spacing: 0.1rem;
 color: white;
 /* margin-top: ; */
}

.spotlight-sec .banner {
 /* background: url(/assets/image4.png) no-repeat;
 background-position: center;
 background-size: cover; */
 object-fit: cover;
 position: relative;
 height: 30rem;
}

.spotlight-sec .spotlights .banner .image1 {
 position: absolute;
 top: -3rem;
 left: -3.5rem;
 transform: rotate(-10deg);
}

.spotlight-sec .spotlights .banner .image2 {
 bottom: -3rem;
 right: -3.5rem;
 position: absolute;
}

.spotlight-sec1 .banner-content .heading {
 font-size: 2rem;
 margin-top: 2rem;
}
.spotlight-sec1 {
 height: 20rem;
}
.spotlight-sec1 .item {
 height: 20rem;
 border-radius: 0.8rem;
}
.spotlight-sec1 .banner-content p {
 margin-top: 1rem;
 height: 8rem;
 overflow-y: hidden;
 line-height: 1.7;
 font-family: "Roboto", sans-serif;
}

.spotlight-sec1 .spotlights .vector {
 left: 0 !important;
 position: absolute;
 width: 13rem;
 top: 60rem;
 transform: scaleX(-1);
 z-index: -99;
}
.category-articles {
 background-color: #f8efff80;
 background-position: center;
 background-size: cover;
 object-fit: cover;
 position: relative;
 /* height: 25rem; */
 padding: 4rem 0rem;
 margin-top: 3.5rem;
}

/* category-articles */
.category-articles .list-articles {
 grid-template-columns: repeat(4, 1fr);
 grid-gap: 1rem;
 /* height: 12rem; */
}

.category-articles .list-articles article {
 text-align: center;
 line-height: 1.5;
 height: 24rem;
}
.category-articles .list-articles article:hover a {
 background-color: #6b4be0;
}
.category-articles .list-articles article h5 {
 margin-top: 0.7rem;
 font-family: "Noticia Text", serif;
}
.category-articles .list-articles article figure {
 /* background: url(/assets/image3.png) no-repeat;
 background-position: center;
 background-size: cover; */
 object-fit: cover;
 position: relative;
 height: 10rem;
 border-radius: 3rem;
 border: 5px solid white;
}
.category-articles .list-articles article p {
 height: 3rem;
 font-family: "Roboto", sans-serif;
 font-size: 0.9rem;
 color: rgb(90, 90, 90);
}
.category-articles .list-articles article a {
 border: 1px solid gray;
 width: fit-content;
 margin: auto;
 padding: 0.4rem 1.2rem;
 color: white;
 background-color: black;
 text-transform: uppercase;
 font-size: 0.8rem;
 letter-spacing: 0.1rem;
}

.category-articles .list-articles article img {
 width: 2rem;
 display: inline-block;
 margin: auto;
 margin-top: 0rem;
}
/* trending articles */
.trending-articles {
 padding: 2rem;
}
.trending-articles article {
 background: url(/assets/trending.png) no-repeat;
 background-position: center;
 background-size: cover;
 object-fit: cover;
 position: relative;
 height: 35rem;
}
.trending-articles article .content {
 width: 25%;
 background-color: white;
 height: 20rem;
 padding: 1rem;
 margin-right: 2rem;
 margin-top: 2rem;
}
.trending-articles article .content .p1 {
 font-size: 1.7rem;
 font-family: "Noticia Text", serif;
}

.trending-articles article .content .p2 {
 font-size: 3rem;
 font-weight: 600;
 color: #d95a45;
 font-family: "Noticia Text", serif;
}

.trending-articles article .content span {
 color: #d95a45;
 text-transform: uppercase;
 font-family: "Noticia Text", serif;
 letter-spacing: 0.2rem;
 margin-top: 0.7rem;
 display: block;
}
.trending-articles article .content img {
 display: block;
 margin-top: 0.5rem;
}
.trending-articles article .content .p3 {
 line-height: 1.5;
 margin-top: 0.5rem;
 height: 7.5rem;
 font-family: "Roboto", sans-serif;
}

.trending-articles article .content a {
 border: 1px solid gray;
 width: fit-content;
 margin: auto;
 padding: 0.6rem 1.2rem;
 color: white;
 background-color: black;
 text-transform: uppercase;
 font-size: 0.8rem;
 letter-spacing: 0.1rem;
 margin-top: 1rem;
 display: block;
 margin-left: 0rem;
}

/* -------------------- */
.category-articles1 .list-articles {
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 1rem;
 margin: auto;
 width: 80%;
 margin: 1px solid red;
 margin-top: -8rem;
}

.category-articles1 .list-articles article {
 text-align: center;
 line-height: 1.5;
 height: 24rem;
 position: relative;
}
.category-articles1 .list-articles article:hover a {
 background-color: #d95a45;
}
.category-articles1 .list-articles article h5 {
 margin-top: 0.7rem;
 font-family: "Noticia Text", serif;
 letter-spacing: 0.1rem;
}
.category-articles1 .list-articles article figure {
 background: url(/assets/image3.png) no-repeat;
 background-position: center;
 background-size: cover;
 object-fit: cover;
 position: relative;
 height: 10rem;
 border-radius: 5rem;
 border: 5px solid white;
}
.category-articles1 .list-articles article p {
 height: 3rem;
 font-family: "Roboto", sans-serif;
}
.category-articles1 .list-articles article a {
 border: 1px solid gray;
 width: fit-content;
 margin: auto;
 padding: 0.4rem 1.2rem;
 color: white;
 background-color: black;
 text-transform: uppercase;
 font-size: 0.8rem;
 letter-spacing: 0.1rem;
}

.category-articles1 .list-articles article img {
 width: 2rem;
 display: inline-block;
 margin: auto;
 margin-top: 0rem;
}

.category-articles1 .list-articles article::after {
 content: "";
 position: absolute;
 bottom: 2.5rem; /* Starts from the top */
 right: -0.5rem; /* Aligns to the right */
 width: 1px; /* Border thickness */
 height: 65%; /* Extends till 70% height */
 background-color: rgba(0, 0, 0, 0.253); /* Border color */
}

/* about sec */
.about-sec {
 padding: 2rem 0;
}
.about-sec .content {
 margin: auto;
 text-align: center;
 line-height: 2;
 padding: 2rem 1rem;
}
.about-sec .content figure {
 width: 170px;
 background: url(/assets/header-logo.png) no-repeat;
 background-size: contain;
 background-position: center;
 height: 70px;
 margin: auto;
 margin-bottom: 2rem;
}
.about-sec .content p {
 width: 60%;
 margin: auto;
 text-align: center;
 line-height: 1.5;
 font-size: 0.9rem;
}
.about-sec .content .line {
 height: 0.1rem;
 background-color: black;
 margin: auto;
 margin-top: 1rem;
 margin-bottom: 1rem;
}
.about-sec .content span {
 text-align: center;
 display: block;
}
.about-sec .content small {
 font-weight: 900;
}

/* footer */
.footer1 {
 width: 100%;
 background-color: #fcf2ee;
 margin: auto;
 padding: 1rem 0;
}
.footer1 .footer-child li {
 color: black;
 font-size: 0.8rem;
}
/* single article */
.article-content h4 {
 font-size: 2rem;
 font-family: "Noticia Text", serif;
 font-weight: 800;
}
.article-content {
 line-height: 1.5;
}
.article-content p {
 color: gray;
 margin-top: 0.5rem;
 font-size: 0.9rem;
 letter-spacing: 0.05rem;
 font-family: "Roboto", sans-serif;
}

.article-content article {
 margin-top: 2rem;
}

.article-content .div {
 margin-top: 1rem;
}

.article-content .div h5 {
 font-size: 1.3rem;
 font-weight: 600;
 font-family: "Noticia Text", serif;
}

.singleArticle {
 position: relative;
}
.srchly-images .vector1 {
 position: absolute;
 top: 47rem;
 left: 0rem;
 transform: scaleX(-1);
 width: 13rem;
 z-index: -999;
}

.srchly-images .vector2 {
 position: absolute;
 top: 15rem;
 right: 0rem;
 width: 13rem;
 z-index: -999;
}
spotlight-sec1 .spotlights {
 grid-gap: 2rem;
}
.spotlight-sec1 .banner-content {
 position: relative;
}
.spotlight-sec1 .banner-content .small-vector {
 position: absolute;
 bottom: -2rem;
 right: 0;
}
.spotlight-sec1 .multi-articles {
 margin-left: 2rem;
}
.spotlight-sec1 .multi-articles article {
 margin-bottom: 1rem;
}
.spotlight-sec1 .multi-articles div {
 margin-left: 1rem;
 line-height: 1.5;
}
.spotlight-sec1 .multi-articles article figure {
 width: 10rem;
 height: 6rem;
 border-radius: 1rem;
 object-fit: cover;
}
.spotlight-sec1 .multi-articles h6 {
 text-transform: uppercase;
 font-size: 0.8rem;
 font-weight: 600;
}

.spotlight-sec1 .multi-articles p {
 font-size: 0.8rem;
 height: 1rem;
}

.spotlight-sec1 .multi-articles a {
 border: 1px solid gray;
 padding: 0.4rem 1rem;
 display: block;
 width: fit-content;
 margin-top: 0.5rem;
 background-color: black;
 color: white;
 font-size: 0.8rem;
 text-transform: uppercase;
}