/* General Styles */
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --text-color: #333;
            --light-bg: #f8f9fa;
        }

        body {
            font-family: 'Poppins', Helvetica, sans-serif;
			line-height: 1.65em;
            color: var(--text-color);
        }

        /* Header Styles */
        .navbar {
            padding: 1rem 2rem;
            background-color: rgba(255, 255, 255, 0.95);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .navbar-brand {
            font-weight: 700;
            color: var(--primary-color);
        }
		
		.logo{
			width:50px;
		}

        /* Hero Slider */
        .hero-slider {
            height: 100vh;
            position: relative;
        }

        .slide {
            height: 100vh;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .slide.active {
            opacity: 1;
        }

        .slide-content {
            text-align: center;
            color: #fff;
            padding: 2rem;
            background-color: rgba(0,0,0,0.08);
            border-radius: 10px;
        }

        /* Features Section */
        .features {
            padding: 5rem 0;
            background-color: var(--light-bg);
        }

        .feature-card {
            padding: 2rem;
            text-align: center;
            transition: transform 0.3s ease;
            border: none;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .feature-card:hover {
            transform: translateY(-10px);
        }

        .feature-icon {
            font-size: 2.5rem;
            color: var(--secondary-color);
            margin-bottom: 1rem;
        }

        /* Portfolio Section */
        .portfolio {
            padding: 5rem 0;
        }

        .portfolio-item {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            margin-bottom: 2rem;
        }

        .portfolio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(52, 152, 219, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .portfolio-item:hover .portfolio-overlay {
            opacity: 1;
        }
       
		
		 /* Page Header */
        .page-header {
            background: linear-gradient(45deg, #2c3e50, #3498db);
            color: #fff;
            padding: 8rem 0 4rem;
            text-align: center;
        }


        /* About Section Styles */
        .about-section {
            padding: 5rem 0;
        }

        .team-member {
            text-align: center;
            margin-bottom: 2rem;
        }

        .team-member img {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            margin-bottom: 1rem;
            object-fit: cover;
        }

        .skill-bar {
            margin-bottom: 1.5rem;
        }

        .skill-bar .progress {
            height: 10px;
            border-radius: 5px;
        }

        .timeline {
            position: relative;
            padding: 2rem 0;
        }

        .timeline-item {
            padding: 2rem;
            border-left: 3px solid var(--secondary-color);
            margin-bottom: 2rem;
            position: relative;
        }

        .timeline-item::before {
            content: '';
            position: absolute;
            left: -10px;
            top: 2rem;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--secondary-color);
        }

        
		
		 /* Contact Section Styles */
        .contact-section {
            padding: 5rem 0;
        }

        .contact-info-card {
            padding: 2rem;
            text-align: center;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-bottom: 2rem;
            transition: transform 0.3s ease;
        }

        .contact-info-card:hover {
            transform: translateY(-5px);
        }

        .contact-info-card i {
            font-size: 2.5rem;
            color: var(--secondary-color);
            margin-bottom: 1rem;
        }

        .contact-form {
            background: #fff;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .form-control {
            border: 2px solid #eee;
            padding: 0.8rem;
            margin-bottom: 1rem;
        }

        .form-control:focus {
            border-color: var(--secondary-color);
            box-shadow: none;
        }

        .map-container {
            height: 400px;
            border-radius: 10px;
            overflow: hidden;
        }

        .map-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
		
		
		/* Footer */
        footer {
            background-color: var(--primary-color);
            color: #fff;
            padding: 3rem 0;
        }

        .social-links a {
            color: #fff;
            margin: 0 10px;
            font-size: 1.5rem;
            transition: color 0.3s ease;
        }

        .social-links a:hover {
            color: var(--secondary-color);
        }

        .btn-primary {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
            padding: 0.8rem 2rem;
        }

        .btn-primary:hover {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
		
		
		
		/* Additional styles for form validation */
		.form-control.is-invalid {
            border-color: #dc3545;
            background-image: none;
        }

        .invalid-feedback {
            display: none;
            color: #dc3545;
            font-size: 0.875rem;
            margin-top: -0.75rem;
            margin-bottom: 1rem;
        }

        .g-recaptcha {
            margin-bottom: 1rem;
        }

        .alert {
            display: none;
            margin-bottom: 1rem;
        }

        /* Loading spinner */
        .spinner-border {
            display: none;
            width: 1.5rem;
            height: 1.5rem;
            margin-left: 0.5rem;
            vertical-align: middle;
        }
		
		/*-----------------skills style ---------------*/
		
		.skills {
			background-color: var(--light-bg);
			padding: 5rem 0;
		}

		.skill-card {
			background: #fff;
			text-align: center;
			padding: 2rem;
			border-radius: 10px;
			box-shadow: 0 5px 15px rgba(0,0,0,0.1);
			transition: transform 0.3s ease;
		}

		.skill-card:hover {
			transform: translateY(-5px);
		}

		.skill-card i {
			font-size: 3rem;
			color: var(--secondary-color);
			margin-bottom: 1rem;
		}

		.skill-card h3 {
			color: var(--primary-color);
			font-size: 1.5em;
		}
		
		/*----------------testimonial style -----------*/
		
		.testimonials {
			/*background-color: var(--light-bg);*/
			padding: 5rem 0;
		}

		.testimonial {
			background: #fff;
			padding: 2rem;
			border-radius: 10px;
			box-shadow: 0 5px 15px rgba(0,0,0,0.1);
			position: relative;
		}

		.testimonial blockquote {
			font-style: italic;
			color: #7f8c8d;
		}

		.testimonial cite {
			display: block;
			margin-top: 10px;
			font-weight: bold;
			color: var(--secondary-color);
		}
		
		/*--------------Blog style --------*/
		.blog {
			background-color: var(--light-bg);
			padding: 5rem 0;
		}

		.blog-post {
			background: #fff;
			padding: 2rem;
			border-radius: 10px;
			box-shadow: 0 5px 15px rgba(0,0,0,0.1);
			transition: transform 0.3s ease;
		}

		.blog-post:hover {
			transform: translateY(-5px);
		}

		.blog-post h3 {
			color: var(--primary-color);
			margin-bottom: 1rem;
		}

		.blog-post p {
			color: #7f8c8d;
		}

		.blog-post .btn-primary {
			background-color: var(--secondary-color);
			border-color: var(--secondary-color);
			color: #fff;
		}

		.blog-post .btn-primary:hover {
			background-color: var(--primary-color);
			border-color: var(--primary-color);
		}
		
		/*------------Services style -----------*/
		
		.services {
			padding: 5rem 0;
		}

		.service-card {
			background: #fff;
			text-align: center;
			padding: 2rem;
			border-radius: 10px;
			box-shadow: 0 5px 15px rgba(0,0,0,0.1);
			transition: transform 0.3s ease;
		}

		.service-card:hover {
			transform: translateY(-5px);
		}

		.service-card i {
			font-size: 3rem;
			color: var(--secondary-color);
			margin-bottom: 1rem;
		}

		.service-card h3 {
			color: var(--primary-color);
			font-size: 1.5em;
			margin-bottom: 1rem;
		}

		.service-card p {
			color: #7f8c8d;
		}
	/*------------loading-----------*/
	/* Preloader container */
	.preloader {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  z-index: 9999; /* Ensure it appears above other content */
	}

	/* Animation container */
	.preloader-animation {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}

	/* Spinner styles */
	.preloader-spinner {
	  width: 50px;
	  height: 50px;
	  border: 5px solid #ddd; /* Light gray border */
	  border-top: 5px solid #007bff; /* Blue border for animation */
	  border-radius: 50%; /* Makes it circular */
	  animation: spin 1s linear infinite; /* Spinning animation */
	}

	/* Keyframes for spinning */
	@keyframes spin {
	  0% {
		transform: rotate(0deg);
	  }
	  100% {
		transform: rotate(360deg);
	  }
	}