:root {
	--bs-nav-link-font-size:20px;
}


/* Animation for fade-in effect */
.animate-fade-in {
   opacity: 0;
   animation: fadeInAnimation 1s ease forwards;
}

@keyframes fadeInAnimation {
   to {
      opacity: 1;
   }
}

.navbar-custom .navbar-toggler-icon {
   color: white;
}

/* Common styles for cards */
.portfolio .card {
   border: none;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
   height: 100%;
}

.portfolio .card-description:hover {
   color: black;
}

.portfolio .card:hover {
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
   transform: scale(1.05);
}

.portfolio .card-img-top {
   width: 100%;
   max-height: 200px;
   object-fit: cover;
   border-radius: 15px 15px 0 0;
}

.portfolio .card-body {
   flex: 1;
   display: flex;
   flex-direction: column;
   padding: 15px;
}

.portfolio .card-title {
   font-weight: bold;
   margin-bottom: 10px;
}

.portfolio .card-text {
   flex: 1;
}

.portfolio .btn {
   margin-top: auto;
   width: 50%;
}

/* Optional: Set the height of each card explicitly to ensure they have the same height */
/* Adjust this value based on the maximum content height you expect in the description */
.portfolio .card-description {
   height: 100px;
   overflow: hidden;
}



/* Increase the container width */

/* Styles for the Hero Banner */
.hero-banner {
   /* background-image: url('main.jpg'); */
   /* Replace with your hero image URL */
   background-size: cover;
   background-position: center;
   position: relative;
   overflow: hidden;
   /* Ensure the glassy effect stays within the banner */
   color: #ffffff;
   text-align: center;
   padding: 50px 0;
   /* Adjust the top and bottom padding to control the height */
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 70vh;
   /* Adjust the height as needed */
}

.glassy-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   /* background-color: rgba(255, 255, 255, 0.1); */
   /* Semi-transparent white background color */
}

.hero-title {
   font-size: 36px;
   font-weight: bold;
   margin-bottom: 20px;
}

.hero-description {
   font-size: 20px;
   max-width: 80%;
   margin: 0 auto;
   word-break: break-word;
}

/* Styling for our apps section */
.our-apps .card {
   background-color: #f4f5fa;
}

.our-apps a {
   background-color: #fdfcdc !important;
   color: black;
   border: 2px solid black;
}

.our-apps a:hover{
   color:unset;
   border: 2px solid black;
   background-color: #d5fcf4 !important;
}

/* Styles for the About Us Section */
#about {
   padding: 50px 0;
}

#about h2.section-title,
#about p.section-description {
   color: white;
}

#about p.section-description {
   font-size: 22px;
}

/* Styles for the Footer */
footer.portfolio {
   padding: 20px 0;
   animation: fadeInAnimation 1s ease forwards;
   opacity: 0;
   /* Initially hide the footer */
}

footer.portfolio h4 {
   color: #333333;
   font-weight: bold;
   margin-bottom: 20px;
}

footer.portfolio p {
   color: #555555;
}

footer.portfolio .social-icons a {
   font-size: 24px;
   margin-right: 10px;
   color: #555555;
   transition: color 0.3s ease;
}

footer.portfolio .social-icons a:hover {
   color: #007bff;
   /* Change color on hover to match the theme's primary color */
}

.bg1 {
   background-color: #1b5995;
}

.bg2 {
   background-color: #fbf9f5;
}

/* Navbar styles */
.navbar {
   background-color: transparent;
   transition: background-color 0.3s ease;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 999;
   padding: 10px 0;
}

.navbar .container {
   position: relative;
}

.navbar.navbar-solid {
   background-color: #1b5995;
   /* Change this to your desired solid background color */
}

/* Hero Section styles */
.hero-banner {
   background-image: url('../images/main.webp');
   /* Replace with your hero image URL */
   background-size: cover;
   background-position: center;
   position: relative;
   overflow: hidden;
   /* Ensure the glassy effect stays within the banner */
   color: #ffffff;
   text-align: center;
   padding: 50px 0;
   /* Adjust the top and bottom padding to control the height */
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
   /* Use min-height to take the full viewport height */
   /* margin-top: 74px; To push the content below the fixed navbar */
}

.mb-5 {
   margin-bottom: 5rem;
}

@media (max-width: 767px) {
   /* Set the background color to transparent for the image container on mobile screens */
   #about {
      padding-bottom: 0 !important;
   }
}

.card .project_img{
   border-radius: 12px 12px 0px 0px;
}

/* Custom Mobile Hamburger Menu */

.navbar-toggler-icon{
	background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-toggler:focus{
    box-shadow:none !important;

	
} 

.navbar-toggler{
		border:none !important;
}

/* End Custom Mobile Hemburger Menu  */

/* Navbar Css */

.cus-dropdown-item{
   font-size: 18px;
}
/* End Navbar Css */