/*!***********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/BlogDetail.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************/

/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/BlogPage.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************/
/* .container {
    max-width: 100%;
    margin: 0 90px;
    padding: 20px;
    
  }
   */
.blog-title {
  /* font-size: 70PX;
    font-weight: 800;
    font-family: 'poppins';
    text-align: center;
    color: #4440DB;
    margin-bottom: 30px;
    margin-top:30px;
    line-height:36px; */
}

.blog-layout {
  width: 87%;
  max-width: 1440px;
  margin: auto;
  display: flex;
  justify-content: space-between;



}

/* .blog-posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: fit-content;
    gap: 30px;
    row-gap: 100px;
  }
   */
.blog-card {

  /* height: 430px;
    width: 308px; */

  /* padding: 15px; */
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.blog-image {
  /* margin-left: -6px; */
  /* margin-top: -5px; */
  width: 100%;
  height: auto;
  /* border-radius: 8px; */
}





.blog-meta {

  /* height: 18px;
    width: 279px;
    color: #898989;
    font-size: 12px;
    font-weight: 500;
    font-family: 'poppins'; */
}

.blog-category {
  font-family: 'poppins';
  color: #4440DB;
  font-weight: 700;
}

.separator {
  margin: 0 5px;
  /* Adds space on both sides */
}


.blog-heading {
  /* color: #000000;
    margin-left: 0px;
    width: 279px;
    font-size: 13px;
    font-weight: 700;
    margin-top: 8px;
    font-family: 'poppins';
    line-height: 26px; */
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-excerpt {




  /* top: 280px; */



  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-read-more-button {
  display: block;
  background: #4440DB;
  color: white;
  border: none;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  border-radius: 0px;


}

.blog-read-more-button:hover {
  background: black;
  transform: scale(1.05);
  transition: all 0.3s ease;

}

/*side bar section*/

.sidebar {
  /* width: 370px;
    height: fit-content;
    padding: 0 15px; */
  /* background: #f9f9f9;
    border-right: 1px solid #ddd; */
}


.sidebar-container {
  position: sticky;
  top: 70px;
  /* Adjust based on your header height */
  height: 1100px;
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  flex-direction: column;
}

.sidebar-section {
  margin-bottom: 10px;
  padding: 10px;
  background: #4440DB;
  border-radius: 1px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
}


.search-bar {
  margin-top: 27px;
  width: 310px;
  height: 45px;
  margin-left: 5px;
  padding: 10px 40px 10px 10px;
  border: 2px solid #FFFFFF;
  border-radius: 2px;
  box-sizing: border-box;
  margin-bottom: 20px;
  border: 1px solid red;
}

.search-icon {
  position: absolute;
  top: 61%;
  right: 55px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
}

/* Sidebar Titles */
.sidebar-title {
  font-family: 'poppins';
  /* font-size: 18px; */
  color: #FFFFFF;
  line-height: 21.6px;
  font-weight: 700;
  /* margin-left: 20px; */
  /* margin-top: 20px; */
  text-transform: uppercase;
  letter-spacing: 1px;
  /* margin-bottom: 20px; */
}


.category-list {
  list-style: none;
  padding: 0;
  margin-bottom: 0px;
}

.category-item {
  color: #fff;
  padding: 8px;
  cursor: pointer;
  border-top: 1.5px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-item:hover {
  background-color: #fff;
  color: black;
}

.category-item::after {
  margin-right: 30px;
  content: "→";
  font-size: 18px;
}

.latest-blogs {
  display: flex;
  flex-direction: column;
  /* gap: 15px;
    margin-bottom: 20px; */
}

.latest-blog-item {
  display: flex;
  align-items: center;

  /* padding: 10px; */


}

.latest-blog-image {
  /* width: 102px;
    height: 51px;
    border-radius: 5px;
    object-fit: cover;
    margin-right: 10px; */
}

.latest-blog-content {
  font-family: 'poppins';
  flex-grow: 1;
  color: #FFFFFF;
}

.latest-blog-title {
  /* line-height:15px; */
  font-family: 'poppins';
  font-size: 12px;
  font-weight: 700;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.latest-blog-date {
  font-family: 'poppins';
  /* font-size: 12px; */
  color: #1B1139;
}

.latest-blog-link {
  filter: invert(0);
  color: white;
  text-decoration: none;
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  /* gap: 5px; */
  /* margin-left: 20px; */
}

.tag {
  background: #4440DB !important;
  color: #fff;
  /* padding: 5px 10px; */
  border-radius: 0 !important;
  /* font-size: 14px; */
  cursor: pointer;
  /* border: 2px solid #fff;  */

}

.tag:hover {
  background-color: #fff;
  color: #000000;
}


/* Latest Blogs Section */
.blogs-section {
  margin-top: 20px;
}

.blog-item {
  display: flex;
  align-items: center;
  margin-top: 15px;
}

.blog-item img {
  width: 70px;
  height: 70px;
  border-radius: 1px;
  margin-right: 10px;
}

.blog-text {
  flex: 1;
  font-size: 14px;
  color: white;
}

/* Tags Section */
.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.tag {
  background: #6A68F7;
  padding: 8px 12px;
  border-radius: 15px;
  font-size: 14px;
  cursor: pointer;
  color: white;
}

.tag:hover {
  background: #5350C3;
}


/* Pagination */
.pagination {
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
}

.page-button {
  background: white;
  border: 1px solid black;
  color: black;
  padding: 10px 15px;
  margin-right: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.page-button.active {
  background: #4440DB;
  color: white;
}

.page-button:hover {
  background: #4440DB;
  color: white;
}


.blog-innercontent {
  /* border:  1px solid red; */
  font-family: 'poppins';

}

.blog-innercontent p {
  font-size: 18px;
  line-height: 30px;
  font-family: 'poppins';
  font-weight: 500;
  /* border:  1px solid red; */
  margin: 10px 0;
}

.blog-innercontent h1 {
  color: #020842;
  font-size: 34px;
  font-weight: 600;
}

.blog-innercontent h2 {
  color: #020842;
  font-size: 34px;
  font-weight: 600;
}

.blog-innercontent h3 {
  color: #020842;
  line-height: 42px;
  font-weight: 500;
  font-size: 27px;
  margin-top: 30px;
}

.blog-innercontent strong {
  font-size: 17px;
  font-weight: 800;
}

.blog-innercontent ol {
  margin-left: 10px;
  list-style: decimal;
  font-size: 18px;
}

.blog-innercontent ol li {
  font-size: 18px;
  line-height: 30px;
}

.blog-innercontent ul {
  list-style-type: disc;
}

.blog-innercontent ul li {
  font-size: 18px;
  line-height: 30px;
}



@media screen and (max-width: 1200px) {
  .blog-innercontent h1 {
    font-size: 30px;

  }

  .blog-innercontent h2 {
    font-size: 30px;

  }

  .blog-innercontent h3 {
    font-size: 25px;

  }

  .blog-innercontent p {
    font-size: 16px;
    line-height: 26px;
  }

  .blog-innercontent strong {
    font-size: 15px;
    font-weight: 800;
  }

  .blog-innercontent ul {
    font-size: 16px;
    line-height: 26px;
  }

  .blog-innercontent ol {
    list-style: decimal;
    font-size: 16px;
  }

  .blog-innercontent ol li {
    font-size: 16px;
    line-height: 26px;
  }

  .blog-innercontent ul li {
    font-size: 16px;
    line-height: 26px;
  }
}



@media screen and (max-width: 768px) {
  .category-item::after {
    margin-right: 5px;
    content: "→";
    font-size: 8px;
  }

  .sidebar-container {
    top: 40px;
    /* height: 650px; */
  }

  .page-button {
    font-size: 10px;
    padding: 5px 10px;
  }

  .blog-innercontent h1 {
    font-size: 12px;


  }

  .blog-innercontent h2 {
    font-size: 12px;

  }

  .blog-innercontent h3 {
    font-size: 12px;
    line-height: normal;

  }

  .blog-innercontent p {
    font-size: 8px;
    line-height: 16px;

  }

  .blog-innercontent strong {
    font-size: 8px;
    font-weight: 800;
  }

  .blog-innercontent ul {
    font-size: 8px;
    line-height: 16px;
  }

  .blog-innercontent ol {
    list-style: decimal;
    font-size: 8px;
  }

  .blog-innercontent ol li {
    font-size: 8px;
    line-height: 16px;
  }

  .blog-innercontent ul li {
    font-size: 8px;
    line-height: 16px;
  }
}
/*!************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/Portfolio/PortfolioPage.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************/
/* @import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&family=Mukta+Malar:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=League+Spartan:wght@100..900&family=Mukta+Malar:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mukta+Malar:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap'); */


@font-face {
  font-family: 'Mukta Malar';
  src: url('/fonts/Mukta_Malar/MuktaMalar-ExtraLight.ttf') format('truetype');
  font-weight: 200;
}

@font-face {
  font-family: 'Mukta Malar';
  src: url('/fonts/Mukta_Malar/MuktaMalar-Light.ttf') format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: 'Mukta Malar';
  src: url('/fonts/Mukta_Malar/MuktaMalar-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Mukta Malar';
  src: url('/fonts/Mukta_Malar/MuktaMalar-Medium.ttf') format('truetype');
  font-weight: 500;
}

@font-face {
  font-family: 'Mukta Malar';
  src: url('/fonts/Mukta_Malar/MuktaMalar-SemiBold.ttf') format('truetype');
  font-weight: 600;
}

@font-face {
  font-family: 'Mukta Malar';
  src: url('/fonts/Mukta_Malar/MuktaMalar-Bold.ttf') format('truetype');
  font-weight: 700;
}

@font-face {
  font-family: 'Mukta Malar';
  src: url('/fonts/Mukta_Malar/MuktaMalar-ExtraBold.ttf') format('truetype');
  font-weight: 800;
}






@font-face {
  font-family: 'Libre Caslon Text';
  src: url('/fonts/Libre_Caslon_Text/LibreCaslonText-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Libre Caslon Text';
  src: url('/fonts/Libre_Caslon_Text/LibreCaslonText-Bold.ttf') format('truetype');
  font-weight: 700;
}

@font-face {
  font-family: 'Libre Caslon Text';
  src: url('/fonts/Libre_Caslon_Text/LibreCaslonText-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}



@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat/static/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat/static/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat/static/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
}


@font-face {
  font-family: 'Lora';
  src: url('/fonts/Lora/static/Lora-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Lora';
  src: url('/fonts/Lora/static/Lora-Bold.ttf') format('truetype');
  font-weight: 700;
}

@font-face {
  font-family: 'Lora';
  src: url('/fonts/Lora/static/Lora-Italic.ttf') format('truetype');
  font-style: italic;
  font-weight: 400;
}

@font-face {
  font-family: 'Crimson Text';
  src: url('/fonts/Crimson_Text/CrimsonText-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Crimson Text';
  src: url('/fonts/Crimson_Text/CrimsonText-Bold.ttf') format('truetype');
  font-weight: 700;
}

@font-face {
  font-family: 'Crimson Text';
  src: url('/fonts/Crimson_Text/CrimsonText-Italic.ttf') format('truetype');
  font-style: italic;
  font-weight: 400;
}

@font-face {
  font-family: 'Roboto Mono';
  src: url('/fonts/Roboto_Mono/static/RobotoMono-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Roboto Mono';
  src: url('/fonts/Roboto_Mono/static/RobotoMono-Bold.ttf') format('truetype');
  font-weight: 700;
}

@font-face {
  font-family: 'Roboto Mono';
  src: url('/fonts/Roboto_Mono/static/RobotoMono-Italic.ttf') format('truetype');
  font-style: italic;
  font-weight: 400;
}








/* .profolio-banking{
 
 background-image:url('/assets/Portfolio-banking.png') ;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;

} */



.portfolio-top-section {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85);
}

.portfolio-card-bg {
  /* background-image: url('/public/assets/card-bg.png');
 background-position: center;
 border-radius: 50%; */

  /* width: 300px;
  height: 220px; */
  background-color: #d3d3d3;
  /* Light gray fill */
  border-radius: 50%;
  /* Makes it oval */
  box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.7);
  /* Glowing shadow */
  /* margin: 100px auto; Center it horizontally and push it down */

}

.bancking-project-heghlight {
  background-image: url('/assets/bancking-project-highlight.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.credit-card-container {
  font-family: 'Crimson Text', serif !important;
}

.ijrah-container {
  font-family: 'Crimson Text', serif !important;
}

@media screen and (max-width: 768px) {
  .portfolio-card-bg {
    background-size: contain;
  }
}

.shadow-effect {
  display: inline-block;
  font-size: 3em;
  font-weight: bold;
  background: linear-gradient(to bottom,
      transparent 40%,
      #efefe1 50%,
      #efefe1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.portfolio-hero {
  background-image: url('/assets/portfolio-hero-section.png');
}

.portfolio-scroll {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

.portfolio-scroll::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}


.ijrah-finance-bg {
  /* background-image: url('/public/assets/Ijraha-bg.png'); */
  background: linear-gradient(to bottom, #F6FAFE00 35%, #AA112242 60%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.event-bg {
  background: linear-gradient(to bottom, #F6FAFE00 35%, #CBE9C6 60%);
}

/* .waterworld-bg{
  background-image: url('/assets/water-world-bg.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
} */

.waterworldcard {
  background: linear-gradient(to bottom, #f1fbfc 35%, #daf4f5 60%);
}

/* .Gmwconference-bg{
  background-image: url('/assets/Gmwconference-bg.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
} */

.Gmwconference-bg2 {
  background: linear-gradient(to bottom, #f6faf9 35%, #c1e8d3 60%);
}

@supports (-webkit-touch-callout: none) {
  .Gmwconference-bg2 {
    height: auto !important;
    min-height: 0 !important;
  }
}

/* .travel-bg{
  background-image: url("/assets/travel-booking-banner.webp");
} */


@media (min-width: 768px) and (max-width: 1200px) {
  .project-overview {
    width: 100%;
  }

  .Empathy-Map {
    width: 100%;
  }

  .empathy-text {
    width: 100%;
  }

  .empathy-card {
    width: 350px;
  }

  .empathy-card h1 {
    font-size: 18px;
  }

  /* .empathy-card ul{
    font-size: 14px;
  } */
}

.food-delivery-page {
  font-family: "Libre Caslon Text", serif;
}

.food-vegetables-bg {
  background-image: url('/assets/varied-vegetables-placed-black-table.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.restaurant-container {
  font-family: "Montserrat", sans-serif;
}

.restaurant-bg {
  background-image: url('/assets/restaurant-bg.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.carrental-bg {
  background-image: url('/assets/car-rental-bg.png');

}

.car-reantal {
  font-family: "Lora", serif;
}

.car-rentalul-bg {
  background-image: url('/assets/car-rental-bg-2.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

}