*{
  margin-top: -180px;
  margin: 0px;
  padding: 0px;
}
.bg{
  margin-top: -100px;
  background: linear-gradient(-45deg, #0f172a, #1e293b, #0f172a, #1e3a8a);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  color: white;
  padding: 4rem 2rem;
  /* height: 1500px; */
  background-size: cover;
  width: 100%;
  /* width:100px; */
}
@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.blog_col{
  width: 300px;
  border: 1px solid rgb(9, 18, 36);
  border-radius: 20px;
  background: linear-gradient(to bottom, #141c3a, #0f1e3c);
  

  /* box-shadow: rgba(53, 53, 53, 0.493) 10px 10px 3px ; */
  .p1{
    font-size: 12px;
    color:rgb(212, 208, 208);
    padding: 0px 20px;
    padding-top: 5px;
    background-color: transparent;
    padding-bottom: 10px;
  }
  h2{
    padding: 0px 20px;
    color: aliceblue;
    background-color:  transparent;
  }
  .p2{
    color: rgb(255, 252, 252);
    font-size: 12px;
    padding: 0px 20px;
    padding-bottom: 10px;
    background-color:  transparent;
    font-family: 'Source Code Pro', monospace;

    /* font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
  }
  span{
    color: rgb(4, 194, 4);
    background-color: transparent;
  }
  span:hover{
    color: rgb(26, 175, 6);
    font-style:italic;
    font-weight: 600;
  }
}

.img {
  width: 300px;
  height: 200px;              /* fixed height helps */
  background-color: aliceblue;
  overflow: hidden;           /* hides overflow */
  border-radius: 10px 10px 0px 0px;
  position: relative;
}

.img-content {
  width: 100%;
  height: 100%;
  background-color: aliceblue;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.img-content:hover {
  transform: scale(1.05);      /* zoom on hover */
}

.heading2{
  font-size: 60px;
  text-align: center;
  margin:40px auto;
  justify-content: center;
 
    font-family: 'Cinzel', serif;
   font-weight: 600;
   font-size: 50px;
    /* padding-top: -100px; */
    background: linear-gradient(to right, #ffffff, #e6f0ff, #f9f9f9);
      /* background: linear-gradient(to right, rgb(235, 224, 130), rgb(182, 118, 194), rgb(228, 120, 120)); */
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      transform: 6s linear ;
    
}
@keyframes new2 {
  0%{
 /* padding-top: -100px; */
    background: linear-gradient(to right, #ffffff, #e6f0ff, #f9f9f9);
      /* background: linear-gradient(to right, rgb(235, 224, 130), rgb(182, 118, 194), rgb(228, 120, 120)); */
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }
  100%{

  background: linear-gradient(to right, rgb(235, 224, 130), rgb(182, 118, 194), rgb(228, 120, 120));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    
      text-decoration: underline;
  }
}
.heading2:hover{
   animation: new2 1s  ease infinite;
   text-decoration: underline;
   cursor: pointer;
    
}
.blog-row{
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  margin: 20px;
  justify-content: center;
  /* justify-content:space-around; */
}
.blog_col:hover{
  box-shadow: rgb(241, 241, 237) 0px 0px 15px;
  /* background: linear-gradient(135deg, #1fb6ff, #009ee0); */
  background: linear-gradient(135deg, #95cbe5, #3daedf, #0077cc, #1fb6ff);
  background-size: 400% 400%;
  animation: gradientAnimation 10s ease infinite;
  color: white;
  /* padding: 2rem; */
  border-radius: 1rem;
  border: transparent;
  /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); */
  transition: transform 0.3s ease;
  .img-content{
    transform: scale(1.05); 
  }
}
@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.img-container {
  width: 300px;
  height: 200px;
  position: relative;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  width: 300px;
  height: 200px;              /* fixed height helps */
  background-color: aliceblue;
  overflow: hidden;           /* hides overflow */
  border-radius: 10px 10px 0px 0px;
  position: relative;
}

.img-content {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  width: 100%;
  height: 100%;
  background-color: aliceblue;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.img-container:hover .img-content {
  transform: scale(1.2);
  opacity:0.2;
}

.overlay-text {
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
  background: rgba(177, 189, 6, 0.377);
  color: white;
  padding: 10px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.img-container:hover .overlay-text {
  opacity: 1;
}

.new{
  font-size: 20px;
  background-color: transparent;
  color:rgb(252, 252, 250) ;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* or 3, 4 etc. */
  gap: 20px;
  padding: 20px;
}

.grid-item {
  /* background: #f0f0f0; */
  padding: 30px;
  border-radius: 10px;
  text-align: center;
}
/* 

.blurred {
  filter: blur(1px);
  transition: filter 0.3s ease;
}
.blog_col {
  transition: filter 0.3s ease;
} */

.img1{
  align-items: center;
             /* fixed height helps */
  background-color: aliceblue;
  overflow: hidden;           /* hides overflow */
  border-radius: 10px 10px;
  position: relative;
  margin-top: 50px;
  /* margin: aut 50px; */
  justify-content: center;
  animation: floatImage 2s ease-in-out ;

}

@keyframes floatImage {
  0% { transform: translateY(-15px); }
  /* 50% { transform: translateY(-15px); } */
  100% { transform: translateY(0px); }
}
.bg1{
  margin-top: -100px;
  background: linear-gradient(-45deg, #20011e, #2e033f, #1d0225, #2b0116);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  color: white;
  padding: 4rem 2rem;
  /* height: 1500px; */
  background-size: cover;
}
.bg-row1{
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  /* margin: 20px; */
  justify-content: center;
  
}
.blog_col1{
  padding: 20px;
  border: 1px solid rgb(9, 18, 36);
  border-radius: 20px;
  background: linear-gradient(135deg, #37143a, #340f3c,#190322);
  /* background: linear-gradient(135deg, #1fb6ff, #009ee0, #0077cc, #1fb6ff); */
  background-size: 400% 400%;
  animation: gradientAnimation 3s ease infinite;
  color: rgb(255, 255, 255);
  ul{
    align-items: center;
    margin: 0px 30px;
  }
  
}
.starfield {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.stars {
  width: 100%;
  height: 100%;
  position: relative;
  background: transparent;
}

.stars::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: white;
  border-radius: 50%;
  box-shadow:
    5vw 10vh white, 15vw 25vh white, 25vw 5vh white, 35vw 30vh white, 45vw 15vh white,
    55vw 25vh white, 65vw 5vh white, 75vw 35vh white, 85vw 20vh white, 95vw 10vh white,
    10vw 40vh white, 20vw 45vh white, 30vw 50vh white, 40vw 55vh white, 50vw 60vh white;
  animation: twinkle 2s infinite ease-in-out, moveStars 30s linear infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes moveStars {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100px, 100px);
  }
}


h1, h2{
  font-family: 'Merriweather', serif;
  font-weight: 600;
  color: #ece8ea;
}

.blog_col1  {
  p{
 font-size: 1rem;
  font-family: 'Lato', sans-serif;
  }
  ul{
 font-size: 1rem;
  font-family: 'Lato', sans-serif;
  }
  i{
 font-size: 1rem;
  font-family: 'Lato', sans-serif;
  }
 
}
.bold{
  font-weight: 600;
  font-style: italic;
}
.typewriter {
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  font-weight: 600;
}

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: .15em solid orange;
  width: 0;
  animation: typing 3.5s steps(40, end) forwards, blink-caret .75s step-end infinite;
  font-size: 28px;
  /* margin: 0 auto; */
  /* text-align: center; */
}

@keyframes typing {
  from { width: 0 }
  to { width: 32% }
}

@keyframes blink-caret {
  0%, 100% { border-color: transparent }
  50% { border-color:transparent }
}

.fade-in {
  opacity: 0;
  animation: fadeIn ease 2s forwards;
}

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

.underline-hover {
  display: inline-block;
  position: relative;
  font-family: 'Merriweather', serif;
  font-weight: 600;
  color: #f5f6f7;
  cursor: pointer;
}

/* Underline style */
.underline-hover::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #facc15;
  transition: width 0.6s ease-in-out;
}

/* Triggered on scroll into view */
.underline-hover.visible::after {
  width: 100%;
}


@keyframes width {
  0%{
    width: 00%;
  }
  100%{width: 100%;}
}


.btn2{
  margin-top: 20px;
  padding: 10px;
  border: 1px solid rgba(134, 15, 134, 0.404) ;
  font-size: 25px;
  border-radius: 10px;
 background: linear-gradient(135deg, #37143a, #340f3c,#190322);
  color: white;
  a{
    color: white;
    text-decoration: none;
  }
  
}
.btn2:hover{
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.432);
   background: linear-gradient(135deg, #95cbe5, #3daedf, #0077cc, #1fb6ff);
  /* text-decoration: underline; */
  a{
    color: white;
    text-decoration: none;
  }
}
.navbar-collapse {
        /* background: linear-gradient(15deg, #0a0612, #1e0d3d); */
 }
 .carousel-nav.prev {
    background-color: rgba(0, 255, 0, 0.2); /* light green for testing */
}

.carousel-nav.next {
    background-color: rgba(255, 0, 0, 0.2); /* light red for testing */
}