.flex-container {
  align-items: center;  /* ✅ vertical alignment */ 
  min-height:40px;  
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  background-color: #252525;
}
.flex-item { margin-right:25px; }
ul {list-style-type:none; }
a { text-decoration:none }

.borderline {
height:3px;
width: 100%;
background-color: #fff;

}

.my-flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}



/*
.p1 {
    text-align: center;
}
*/

/************************************************************************************************  grid container */

.grid-container {
  margin-top: 40px; /* adds space above */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 10px;
}


.grid-item {
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.grid-item img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.grid-item .caption {
  display: block;
  margin-top: 10px;
  text-decoration: none;
  color: #252525; 
  font-weight: bold;
  font-size: 16px;
}

.grid-item .caption:hover {
  /* text-decoration: bold; */
  color:#007BFF;
}



/************************************************************************************* Marquee section ************/

/* horizontal line */
.marquee-divider {      
  border: none;
  border-top: 3px solid white;
  margin: 0;
}

.marquee-wrapper {
  display: flex;              /* ✅ enables vertical centering */
  align-items: center;        /* ✅ vertical center */
  width: 100%;
  overflow: hidden;
  background-color: #252525;
  white-space: nowrap;
  position: relative;
  height: 40px;
}

.marquee-track {
  position: absolute;
  will-change: transform;
  white-space: nowrap;
  animation: scroll-left 25s linear infinite;
}


.marquee-wrapper:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-text {
  color: #c1ef06;                       /* partion line color */
  font-size: 16px;
  line-height: 1;                         /* 🔧 Prevents vertical spacing from line height */
  padding: 0 10px;                        /* 🔧 Only horizontal padding */
  padding-left: calc(100vw + 10px);      /* ✅ Start off-screen */
  display: inline-block;
}


/* Animate from off-screen right to off-screen left */
@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}



.marquee-text img.marquee-icon {
  height: 24px;                    /* adjust the size of icon */
  width: auto;
  vertical-align: middle;
}




/******************************************************************************************** Footer begin ********/

.footer-divider{

  border: none;
  border-top: 10px solid white;
  margin: 0;

}



.site-footer {
  background-color: #252525;
  color: #ffffff;
  padding: 40px 20px 20px;
  font-size: 12px;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;      /* ✅ center the entire group */
  gap: 40px;                    /* spacing between columns */
  max-width: 1000px;            /* ✅ controls total width */
  margin: 0 auto;               /* ✅ centers the block */
  text-align: center;           /* optional: center-align text */
}


.footer-content > div {
  flex: 1 1 250px;
}

.footer-content h5 {
  margin-bottom: 10px;
  color: #06dcef;
}

.footer-content p {
  margin: 0 0 8px;
  line-height: 1.6;
}

.social-icons a {
  display: inline-block;
  color: #0692ef;
  margin-right: 20px;
  font-size: 14px;
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: #ffffff;
}

.footer-bottom {
  border-top: 2px solid #444;
  text-align: center;
  padding-top: 10px;
  margin-top: 20px;
  font-size: 13px;
  color: #aaaaaa;
}
/*  footer end */





/**************************************************************************************** Navbar container */





.nav-link {
  display: block;
  padding: .5rem 1rem;
  color: #fff;
  text-decoration: none;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

.topnavlinks{

    padding: .5rem 1rem;
  color: #fff;
  text-decoration: none;

}

/* Navbar main styles */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.navbar-brand {
  display: flex;
  align-items: center;
}

.navbar-nav {
  display: flex;
  flex-direction: row;
  margin-left: auto;
}

.navbar-nav .nav-item {
  padding-left: 20px;
  flex-shrink: 0;
}

.navbar-toggler {
  border: 2px solid white;
  background-color: transparent;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

/*.navbar-toggler-icon {*/
/*  transform: scale(2);         */
/*  width: 1.5em;                */
/*  height: 1.5em;               */
/*}*/




/* Mobile styles */
@media (max-width: 991.98px) {
  .navbar {
    padding: 0 15px;
  }

  .navbar-collapse.show {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    background-color: #212529;
    padding: 10px 0;
  }

  .navbar-nav {
    margin-left: 0 !important;
    flex-direction: column;
    width: 100%;
    padding-left: 0;
  }

  .navbar-nav .nav-item {
    width: 100%;
    text-align: left;
    padding: 10px 0;
  }
}



    

.custom-button {
  background-color: #4B0082; /* Indigo */
  color: white;
  border-radius: 4px;
  padding: 10px;
  border: none;
}



/******************************************************************** container with boxes*/


/* Test Container */


.test-container {
  display: flex;
  flex-wrap: wrap;                /*Prevent overflow of content.*/
  gap: 20px;
  margin: 40px 0;                /* Remove auto centering */
  width: 100%;                   /* Take full width */
  padding: 0 10px;               /* Optional: side padding */
  box-sizing: border-box;
}

.test-container p {
  text-align: justify;
}


.box-10 {
  flex: 1;

  /*background-color: #f8f9fa;*/
  padding: 15px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.box-11 {
  flex: 2;
  background-color:#fff;
  padding: 15px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}



.box-11, .box-12 {
  min-height: 100px;
} 

.box-11 p {
  text-align: justify;
}

@media (max-width: 768px) {
  .box-10,
  .box-11 {
    flex: 0 0 100%;
  }
}










#fancyCarousel .carousel-item img {
  height: 400px;
  object-fit: cover;
  width: 100%;
}

/******************************************** social-icons    *******************************

.topnavlinks .fa-linkedin {
  color: #0e76a8; /* LinkedIn blue 
}

.topnavlinks .fa-instagram {
  color: #E4405F; /* Instagram pinkish-red 
}

.topnavlinks .fa-twitter {
  color: #1DA1F2; /* Twitter blue 
}