.top-nav
    {
      background-color: rgba(0, 0, 0, 0.171);
    }
  .top-nav.scrolled{
    background-color: rgba(0, 0, 0, 0.8);
  }
    .body-bg
    {
        background-image: url(images/Untitled-1.png);
        background-size: cover;
        background-attachment: fixed;
        background-position: position;
        
    }
    .img-align{
      text-align: center;
  }
  .circle-img{
    border-radius: 50%;
    border: solid rgba(0, 0, 0, 0.171);
    height: 300px;
    width: 250px;
    background-color: beige;
  }
    .pad
    {
      padding-top: 200px;
    }
    .h1-col{
      color: rgb(7, 250, 169);
    }
    .colo-1
    {
      color: rgb(7, 250, 169);
      font-family:'Impact', Haettenschweiler, Arial Narrow Bold, sans-serif;
      font-size: 50px;
    }
    .colo-2
    {
      color: white;
      font-size: 20px;
    }
    .accordion-button{
      color: rgb(7, 250, 169) !important;
    }
    .accordion-button:focus,
    .accordion-button:active{
      outline: rgb(5, 20, 15);
      color: rgb(7, 250, 169);
    }
    .btn-custom-outline{
      border-color: rgb(5, 20, 15);
      border-width: 2px;
      background-color: rgb(5, 20, 15);
      color: white;
    }
     
    .lit-break
    {
      padding-top:  px;
    }
    .but-2
    {
      background-color: rgba(255, 255, 255, 0.219);
      border: solid white;
      height: 45px;
      padding-top: 5px;
      border-radius: 40px;
      text-align: center;
      color: white;
    }
    .glass-bg{
      background-color: rgba(0, 0, 0, 0.398);
      color: white;
    }
     

.text-container {
    overflow: hidden;
    padding: 10px 0px;
    position: relative;
    height: 200px;
}

.sliding-text {
    color: rgb(247, 244, 99);
    display: inline-block;
    white-space: nowrap;
    font-size: 30px;
    animation: slideText 10s linear infinite;
    margin-right: 20px; /* Adjust the spacing between text blocks */
    opacity: 0; /* Initially hide the text */

}
.newCard
{
  padding: 10px 40px;
}
.drop{
  opacity: 0;
}
 
.drop.dropdown-element {
  opacity: 0; /* Initially hidden */
  animation: drop-down 2s ease-in-out forwards;
}

@keyframes drop-down {
  from { transform: translateY(-100px); opacity: 0; } /* Start from off-screen with zero opacity */
  to { transform: translateY(0); opacity: 1; }
}
.slide-right{
  opacity: 0;
}
.slide-right-element{
  opacity: 0;
  animation: slide-right 2s ease-in-out forwards;
}

@keyframes slide-right {
  from { transform: translateX(-100px); opacity: 0; } /* Start from off-screen with zero opacity */
  to { transform: translateX(0); opacity: 1; }
}
.slide-left{
  opacity: 0;
}
.slide-left-element{
  opacity: 0;
  animation: slide-left 2s ease-in-out forwards;
}
@keyframes slide-left {
  from { transform: translateX(100px); opacity: 0; } /* Start from off-screen with zero opacity */
  to { transform: translateX(0px); opacity: 1; }
}
.grid-container {
    display: flex;
    grid-template-columns: repeat(1, 1fr); /* Adjust the number of columns as needed */
    gap: 20px; /* Adjust the gap between grid items as needed */
    padding: 20px;
    background-color: #ffffff8c; /* Set the background color of the grid container */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.253); /* Apply the shadow effect */
    min-height: auto;
    border-radius: 10px;
}
.footer-bg{
  background-color: rgba(0, 0, 0, 0.808);
  color: white;
}
.footer-box{
  padding: 100px 20px;
  font-size: 20px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

@keyframes slideText {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

.text
{
  position: absolute;

}
.tran
{
  transition: background-color 0.5s ease;
}

.btn-col{
  text-decoration: none;
  -webkit-text-fill-color: white;
}
.tran:hover
{
  background-color: #33333375;
  border-color: black;
}
.grid-container {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap onto multiple rows */
}

.grid-item {
   min-height: 550px;
}
.mb-4{
  margin-bottom: 800rem;
}
.download-img{
  height: auto;
  width: 30px;
  margin-left: 10px;
}
@media screen and (max-width: 767px) {
    .phoneCol {
        background-color: #333; /* Solid background for small screens */
    }
    .text-container
    {
      background-color: rgba(0, 0, 0, 0.171);
      height: 100px;
    }
    .redux
    {
      font-size: 35px;
    }
    .sliding-text
    {
      font-size: 15px;
    }
    .lit-break
    {
      padding-top: 40px;
    }
    .redux-container
    {
      padding: 30px 40px;
    }
    .grid-container
    {
      height :fit-content;
      background-color: white;
    }
     
}
@media (max-width: 480px) {
    
  
}