#loader {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 *background-color: #ffffff;
  opacity: 0.9;
}


#loader img {
  position: absolute;
  top: 50%;
  left: 50%;

}

.text-muted {
    *color: #716d6d !important;
    *color: red !important;
    
}
.home-6 .bottom-item .home6-slider .item img {
	height: 80px !important;
}


#home6-slider {
    width: calc(350%)!important;
}
.tool-img {
  position: relative;
}

.tool-img:hover::before {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -5px);
  padding: 5px 10px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
}

.tool-img:hover::before {
  opacity: 1;
}


@media (max-width: 767px) {
	
	.home-6 .top-home {
    padding-left:30px !important;
	padding-right: 30px !important;
}
}

@media (max-width: 767px) {
.bottom-item {
	padding-left:30px !important;
	padding-right: 30px !important;
	padding-top:40px !important;
}


}



@media (max-width: 767px) {
#home6-slider {
    width: calc(520%)!important;
	margin-left:-20px !important;
}
}

@media (max-width: 767px) {
.profile-img-main {
	margin-top: -130px !important;
}
	
	
	
}

.text-muted {
    *color: #354b71 !important;
}


.btn-book-call:hover {
    background: #2fb4ae !important;
    color: #fff;
    border-color: #2fb4ae !important;
    border: 1px solid;
}



.text-primary:hover {
	*border-bottom: 1px solid #2fb4ae !important;
	*border-width: 50%;
	font-weight: 600 !important;
}

.text76-primary:hover::after {
  content: '';
  position: absolute;
  bottom: 5px; /* Adjust this value to move the border away from the text */
  left: 4%;
  *transform: translateX(20%);
  width: 10%; /* Adjust this value to change the border length */
  height: 1px;
  background-color: #2fb4ae;
}

.my-work {
	background-color: rgba(47,180,174,.14);
}
	
.contact {
background-color: rgba(47,180,174,.06);
}	
	
	/*Testing*/
	
.card {
    scroll-snap-align: start;
    background-color: white;
    border-radius: 20px;
    *box-shadow: 0px 2px 6px 0px rgba(28,47,80,.08);
    cursor: pointer;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    text-align: left;
    overflow: hidden; /* Add this line */
}

.card:hover {
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.card:hover .card-info i {
    color: #2fb4ae;
}


.card img {
    width: auto;
    height: 310px;
    object-fit: cover;
	object-position: center;
    border-radius: 20px 20px 0 0;
    transition: transform 0.3s ease-in-out;
	transform-origin: bottom center; /* Add this line */
}

a .card h3 {
	color: #1c2f50 !important;
}

.card:hover img {
    transform: scale(1.2);
}

.card:hover .card-border {
    transform: scale(1)!important;
}


.card-info {
    padding: 0px 30px 15px 30px;
	margin-top:-10px;
    position: relative;
}

.card-info h3 {
    font-size: 18px;
    margin-bottom: 0px;
}

.card-info p {
    font-size: 13px;
    color: gray;
}

.card-info i {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    font-size: 24px;
    color: #bdbdbd;
}

/*


.card {
    perspective: 1000px;
}

.card-content {
    width: 300px;
    height: 200px;
    background-color: #FFF;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    position: relative;
}

.card-content:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
}

.card-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.card h3 {
    font-size: 18px;
    margin-bottom: 5px;
}

.card p {
    font-size: 14px;
    color: #999;
}

.material-icons {
    font-size: 18px;
    color: #999;
}
*/

.top {
  --offset: 50px; 
  
  position: sticky;
  bottom: 20px;      
  margin-right:10px; 
  place-self: end;
  margin-top: calc(100vh + var(--offset));
  
  /* visual styling */
  text-decoration: none;
  padding: 10px;
  font-family: sans-serif;
  color: #fff;
  background: #000;
  border-radius: 100px;
  white-space: nowrap;
}


/* remove the below if you don't want smooth scrolling */
html,
body {
  scroll-behavior: smooth;
}


/* Back to Top Button Styles */
#backToTop {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #2fb4ae; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px 20px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
}

#backToTop:hover {
    *background-color: #555; /* Add a dark-grey background on hover */
	opacity: 0.8;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
    margin-bottom: 16px;
}

.tag {
    background-color: #e0e0e0; /* Light gray background */
    background-color: rgba(47,180,174,.14); /* Light gray background */
    background-color: #2fb4ae; /* Light gray background */
	color: white; 
	
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.7em;
}

.card:hover h3 {
	
	color:#2fb4ae !important;
}
.project-summary {
	*line-height: 15px;
	*margin-right: 10px;
	*font-size: 0.8em !important;
}

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999 !important;
    background-color: #2fb4ae; /* You can change this color */
}

#loader {
    display: block;
    position: relative;
    left: 48%;
    top: 45%;
    width: 150px; /* Adjust as needed */
    height: 150px; /* Adjust as needed */
    margin: -75px 0 0 -75px; /* Half of width and height */
    border-radius: 50%;
    *animation: spin 1s infinite linear;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.in-front {
    z-index: 7000; /* This is a high value to ensure it's on top */
    position: relative; /* z-index only works on positioned elements */
}


navbar>.container, .navbar>.container-fluid, .navbar>.container-lg, .navbar>.container-md, .navbar>.container-sm, .navbar>.container-xl, .navbar>.container-xxl {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
	z-index: 7000 !important;
}

.navbar {
    z-index: 7000; /* or a value lower than the loader's z-index */
	z-index: 7000 !important;
}

.fullscreen-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    *background-color: rgba(0, 0, 0, 0.9); /* Adjust the background color as needed */
    background-color: rgba(80, 180, 174, 0.96); /* Adjust the background color as needed */
    z-index: 9999;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.fullscreen-nav ul {
    list-style-type: none;
    padding: 0;
}

.fullscreen-nav ul li {
    margin: 20px 0;
}

.fullscreen-nav ul li a {
    font-size: 24px;
    color: #fff;
}

.fullscreen-nav .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
}

.fullscreen-nav ul li a:active,
.fullscreen-nav ul li a:focus {
    color: #2fb4ae;
}

.text-muted2 {
	
	Color: #6c6a6a !important
}

/*
@media (min-width: 992px) { /* This is typically the breakpoint for desktop view in Bootstrap *
    .container-fluid {
        padding-left: 15px;  /* Adjust as needed *
        padding-right: 15px; /* Adjust as needed 
    }
}*/

/* By default, hide the mobile-only menu items */
.mobile-only {
    display: none;
}

/* Display the mobile-only menu items on screens smaller than 992px (typical breakpoint for mobile devices) */
@media (max-width: 767px) {
    .mobile-only {
        display: block;
    }
	
	#loader {
    left: 40% !important;
	}
	.home-6 .bottom-item .home6-slider .item img {
		height: auto !important;
	}
	.about-item {
		padding-left:16px !important;
		padding-right:10px !important;
		
	}
		.about-box {
		padding-left:16px !important;
		padding-right:10px !important;
		margin-left: -10px !important;
		margin-right: -10px !important;
	}
}

.copyright {
	background-color: #15233b;
	text-align: center;
	padding:0px 20px 0px 20px !important;
	border-top: 1px solid #2f405d;
	color: #a1a6b0;
	color: #5a677d;
}

.bottom-footer {
	padding: 60px 20px 30px 20px;
	color: #a1a6b0;
	
}.bottom-footer h5 {
	color: #d2e6e5;
	font-size: 2rem;
	
}

.social-icon:hover {
    color: #2fb4ae;
}

@media (max-width: 992px) {
.navbar {
    background-color: transparent !important;
    padding: 16px 0;
}
.nav-sticky.navbar {
    background: #fff !important;
}

}

.red-tag {
    background-color: #b42f2f;
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.7em;
}

.orange-tag {
    background-color: #b26a1f;
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.7em;
}