@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700;800&display=swap');

  * {
  	box-sizing: border-box;
  	margin: 0;
  	padding: 0;
  	font-family: 'Poppins', sans-serif;
  }
  
  body {
  	background: #101010;
  }

  img {
	max-width: 100%;
  }
  button {
  	cursor: pointer;
  }
  
  .myservice.section .swiper-slide {
	padding: 0;
	height: auto;
}
  .myservice.section .swiper-grid > .swiper-wrapper {
	flex-wrap: wrap;
}

.myservice.section .myServiceSwiperGrid .swiper {
  width: 100% !important;
}

.myservice.section .swiper {
	z-index: 0;
	height: auto;
}

.myservice.section .swiper-button-next, .myservice.section .swiper-button-prev {
	color: #239e66;
}
.myservice.section .view-more-btn {
	margin-top: 30px;
}
.view-more-btn a {
	margin-bottom: 0;
}

  /* Animated Box */
  .Box {
  	position: relative;
  	width: 123px;
  	height: 123px;
  	background-color: #10ac84;
  	border: 5px solid #33d9b2;
  	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
  	transform-style: preserve-3d;
  	transform-origin: center;
  	transform: rotate(45deg);
  	display: flex;
  	flex-wrap: wrap;
  	box-sizing: content-box;
  }

  .Box span {
  	width: 40px;
  	height: 40px;
  	background: #fff;
  	margin: 0.5px;
  	transform-style: preserve-3d;
  	transform-origin: center;
  	animation: Loader 2s linear infinite;
  }

  /* Animation Delay */
  .Box span:nth-child(3) {
  	animation-delay: .8s;
  }

  .Box span:nth-child(2), .Box span:nth-child(6) {
  	animation-delay: .6s;
  }

  .Box span:nth-child(1), .Box span:nth-child(5), .Box span:last-child {
  	animation-delay: .4s;
  }

  .Box span:nth-child(4), .Box span:nth-child(8) {
  	animation-delay: .2s;
  }

  .Box span:nth-child(7) {
  	animation-delay: 0s;
  }

  /* Loader Animation */
  @keyframes Loader {
  	0%, 100% {
  		transform: scale(1);
  	}

  	30%, 50% {
  		transform: scale(0);
  	}

  	75% {
  		transform: scale(1);
  	}
  }

  /* Loading Text */
  .loading-text {
  	margin-top: 20px;
  	font-size: 18px;
  	color: #fff;
  	font-weight: bold;
  	text-transform: uppercase;
  	letter-spacing: 2px;
  }


  @keyframes bounce {
  	0%, 100% {
  		transform: translateY(0);
  	}

  	50% {
  		transform: translateY(-10px);
  	}
  }

  .scroll-down-btn a {
  	position: absolute;
  	right: 0;
  	font-size: 30px;
  	color: #fff;
  	width: 30px;
  	text-align: center;
  	bottom: 30px;
  	animation: bounce 1.2s infinite;
  }

  .scroll-down-btn {
  	position: relative;
  }

  .scroll-btn a {
  	position: absolute;
  	right: 0;
  	font-size: 30px;
  	color: #fff;
  	width: 30px;
  	text-align: center;
  	bottom: 30px;
  }

  .scroll-btn {
  	position: relative;
  }

  .scroll-btn a {
  	position: absolute;
  	right: 0;
  	font-size: 30px;
  	color: #fff;
  	width: 30px;
  	text-align: center;
  	bottom: 30px;
  }

  .scroll-btn {
  	position: relative;
  }

  .scroll-up-btn a {
  	position: fixed;
  	right: 30px;
  	font-size: 30px;
  	color: #000;
  	width: 50px;
  	text-align: center;
  	bottom: 20px;
  	background: #239e66;
  	z-index: 1;
  }

  .scroll-up-btna.show {
  	display: block;
  }

  .scroll-up-btn {
  	position: relative;
  }

  .scroll-up-btn {
  	position: relative;
  }
  .navigation li a:hover::after,
  .navigation li a.active::after {
	  width: 100%;
  }
  .navigation li a {
  	display: flex;
  	align-items: center;
  	padding: 0px 0px;
  	font-size: 13px;
  	position: relative;
  }

  .navigation a {
  	text-decoration: none;
  	color: #fff;
  }

  .main_menu #drop {
  	display: none;
  }

  .navigation li a::after {
  	position: absolute;
  	content: "";
  	width: 0%;
  	bottom: -5px;
  	left: 0;
  	border-bottom: 3px solid #239e66;
  }

  .navigation li a:hover::after {
  	width: 100%;
  	transition: ease-in-out .8s;
  }

  .navigation li a {
  	display: flex;
  	align-items: center;
  	padding: 0px 0px;
  	font-size: 13px;
  	position: relative;
  }

  .navigation a {
  	text-decoration: none;
  	color: #fff;
  }

  .main_menu #drop {
  	display: none;
  }

  .navigation li a::after {
  	position: absolute;
  	content: "";
  	width: 0%;
  	bottom: -5px;
  	left: 0;
  	border-bottom: 3px solid #239e66;
  }

  .navigation li a:hover::after {
  	width: 100%;
  	transition: ease-in-out 0.8s;
  }

  .header-wrap {
  	padding: 20px 0;
  	position: fixed;
  	width: 100%;
  	top: 0;
  	left: 0;
  	backdrop-filter: blur(10px);
  	z-index: 1000;
  }

  .nav-fix {
  	display: flex;
  	align-items: center;
  	justify-content: space-between;
  	max-width: 1140px;
  	margin: 0 auto;
  }

  .logo img {
  	width: 130px;
  }

  /* Navigation */
  .main_menu nav {
  	display: flex;
  	align-items: center;
  }

  .navigation {
  	display: flex;
  	list-style: none;
  	gap: 25px;
  }

  .navigation li a {
  	text-decoration: none;
  	color: #fff;
  	font-size: 14px;
  	padding: 10px 0;
  	position: relative;
  }

  .navigation li a::after {
  	content: "";
  	position: absolute;
  	width: 0;
  	bottom: -5px;
  	left: 0;
  	border-bottom: 3px solid #239e66;
  	transition: width 0.3s ease-in-out;
  }

  .navigation li a:hover::after {
  	width: 100%;
  }

  /* Mobile Menu */
  .toggle {
  	display: none;
  	flex-direction: column;
  	background: none;
  	border: none;
  	cursor: pointer;
  	gap: 5px;
  }

  .icon_bar {
  	display: block;
  	width: 25px;
  	height: 3px;
  	background: #fff;
  	border-radius: 2px;
  }

.banner-holder {
	display: flex;
	align-items: center;
	position: relative;
	background: url(../images/banner.png) no-repeat center;
	background-size: cover;
	background-attachment: fixed;
}
  .two-sec {
  	display: flex;
  }

  .header-wrap {
  	padding: 23px 0;
  	position: fixed;
  	width: 100%;
  	top: 0;
  	left: 0;
  	right: 0;
  	z-index: 2;
  	backdrop-filter: blur(0px);
  }

  .nav-fix {
  	display: flex;
  	align-items: center;
  	max-width: 1140px;
  	margin: 0 auto;
  }

  .container {
  	max-width: 1140px;
  	margin: 0 auto;
  }

  .main_menu {
  	margin-left: auto;
  }

  .logo img {
  	max-width: 100%;
  	width: 130px;
  	display: block;
  }

  .scrolled {
  	background: rgba(0, 0, 0, 0.9);
  	padding: 17px 0;
  	backdrop-filter: blur(10px);
  	z-index: 1;
  }

  /*======================= end ====================================*/
  .middle-banner .left-content h1 {
  	color: #fff;
  	font-size: 30px;
  	font-weight: 400;
  }

  .middle-banner .left-content p {
  	color: #fff;
  }

  .middle-banner .left-content a {
  	color: #fff;
  	text-decoration: none;
  	padding: 10px 20px;
  	background: #239e66;
  }

  .middle-banner .left-content a:hover {
  	background: #1e6444;
  }

  .middle-banner {
  	min-height: 85vh;
  	position: relative;
  }

  .contact-butt {
  	margin-top: 20px;
  	padding: 10px 0;
  }

  .subtitle p {
  	font-size: 30px;
  	font-weight: 400;
  }

  .middle-banner .left-content {
  	max-width: max-content;
  	position: absolute;
  	top: 35%;
  }

  /* Typewriter effect 1 */
  .writing-text p {
  	font-size: 3rem;
  	font-weight: bold;
  	letter-spacing: 0.1rem;
  	overflow: hidden;
  	margin-bottom: 0;
  }

  .writing-text p span.typed-text {
  	font-weight: 500;
  	color: #239e66;
  }

  .writing-text p span.cursor {
  	display: inline-block;
  	background-color: #ccc;
  	margin-left: 0.1rem;
  	width: 3px;
  	animation: blink 1s infinite;
  }

  .writing-text p span.cursor.typing {
  	animation: none;
  }

  @keyframes blink {
  	0% {
  		background-color: #ccc;
  	}

  	49% {
  		background-color: #ccc;
  	}

  	50% {
  		background-color: transparent;
  	}

  	99% {
  		background-color: transparent;
  	}

  	100% {
  		background-color: #ccc;
  	}
  }

  /*=========================== typewriter end =========================*/

  .contact-info-banner ul {
  	display: flex;
  	gap: 30px;
  	list-style: none;
  	color: #fff;
  }

  .contact-info-banner ul p a {
  	color: #a29b9b;
  	text-decoration: none;
  }

  .contact-info-banner ul li {
  	display: flex;
  	flex-direction: column;
  	gap: 10px;
  	border-right: 2px solid;
  	padding-right: 30px;
  }

  .contact-info-banner p {
  	margin: 0;
  }

  .contact-info-banner ul li:last-child {
  	border-right: 0;
  }

  .contact-info-banner {
  	padding-bottom: 40px;
  }


  /*============================== end ===================================*/

  .my-image img {
  	width: 100%;
  }

  .who-iam-content {
  	margin-left: 2rem;
  }

  .who-iam {
  	color: #fff;
  	padding: 6rem 0;
  }

  .who-iam-content .my-info h4 {
  	font-size: 24px;
  	color: #239e66;
  	margin-bottom: 12px;
  }

  .who-iam-content .my-info h2 {
  	margin-bottom: 20px;
  	line-height: 1.6em;
  	font-size: 31px;
  }

  .who-iam-content .my-info p {
  	color: #989898;
  	line-height: 1.7;
  	padding-bottom: 20px;
  	border-bottom: 1px solid;
  	margin-bottom: 20px;
  }

  .cv-info {
  	display: grid;
  	grid-template-columns: repeat(2, 1fr);
  	grid-template-rows: repeat(2, 1fr);
  	grid-column-gap: 0px;
  	grid-row-gap: 0px;
  	color: #989898;
  }

  .cv-info span {
  	margin-right: 12px;
  	color: #fff;
  }

  .downloadcv a {
  	color: #fff;
  	text-decoration: none;
  	padding: 10px 30px;
  	background: #239e66;
  }

  .downloadcv {
  	padding: 10px 0;
  	margin-top: 10px;
  }

  /*=============================== end =============================*/

  .progress-bar {
  	width: 100%;
  	height: 10px;
  	background-color: #313131;
  	overflow: hidden;
  }

  .progress {
  	height: 100%;
  	background-color: #239E66;
  	transition: width 30s ease-in-out;
  }

  .skill-progress-bar {
  	display: flex;
  	color: #7d7d7d;
  	width: 100%;
  	justify-content: space-between;
  }

  .skill-progress-1, .skill-progress-3, .skill-progress-5 {
  	margin-bottom: 25px;
  	margin-right: 15px;
  }

  .skill-progress-2, .skill-progress-4, .skill-progress-6 {
  	margin-bottom: 25px;
  	margin-left: 15px;
  }

  .section-heading>.section-title {
  	color: #fff;
  	margin: 60px 0;
  	font-size: 50px;
  	position: relative;
  	font-weight: 500;
  }

  .section-title>.title-bg {
  	font-size: 110px;
  	position: absolute;
  	z-index: -1;
  	left: -10px;
  	bottom: -10px;
  	color: transparent;
  	-webkit-text-stroke: 1px #239e66;
  	opacity: .2;
  	text-transform: uppercase;
  	-webkit-user-select: none;
  	line-height: 1;
  	max-width: 100%;
  	font-weight: 900;
  }

  /*=================== end ======================*/
  .section {
  	margin-top: 3.5rem;
  }
  .service-box {
	height: 100%;
	display: flex;
}

  .service-box-content {
  	color: #fff;
  }

  .service-box-content .fa-brands.fa-codepen {
  	color: #239e66;
  	font-size: 50px;
  	margin-bottom: 22px;
  }

  .service-box-content h2 {
  	font-size: 20px;
  	margin-bottom: 14px;
  	font-weight: 500;
  }

  .service-box-content p {
	margin: 0;
	font-size: 15px;
	color: #676767;
}

  .service-box-content {
  	color: #fff;
  	padding: 38px 32px;
  	background: #161616;
  	border-bottom: 2px solid transparent;
  	position: relative;
  }

  .service-box-content::after {
  	content: "";
  	position: absolute;
  	bottom: 0;
  	left: 0;
  	width: 0;
  	height: 2px;
  	background-color: #239e66;
  	transition: width 0.5s ease;
  	/* Add transition to the width property */
  }

  .service-box-content:hover::after {
  	width: 100%;
  	/* Expand the width to create the right-to-left animation */
  }

  .service-content .col-lg-4 {
  	padding: 10px 10px;
  }

  /*=========================== end ================================*/
  .counter-content {
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	gap: 6rem;
  	color: #fff;
  	background: #161616;
  	border-bottom: 2px solid #239e66;
  	padding: 20px;
  	margin-top: 3rem;
  }

  .counter-wrap {
  	display: flex;
  	align-items: center;
  	gap: 1rem;
  }

  .counter-wrap h2 {
  	font-size: 65px;
  	color: #239e66;
  }

  .counter-wrap p {
  	margin-bottom: 0;
  	font-size: 22px;
  }

  /*================================ end ===============================*/

  .tabholder {
  	display: flex;
  	flex-direction: column;
  	justify-content: center;
  	align-items: center;
  }

.tab {
	margin-bottom: 30px;
}

  .tab button {
  	background: transparent;
  	color: #fff;
  	border: none;
  	margin-right: 16px;
  	font-size: 15px;
  }

  .tab button.active {
  	color: #239e66;
  	border-bottom: 1px solid;
  }

  .tab button:hover {
  	color: #239e66;
  	border-bottom: 1px solid;
  }



  .tabcontent.active {
  	display: block;
  }

  .tabcontent {
  	display: none;
  }


  .tabholder {
      text-align: center;
      margin-bottom: 30px;
    }
	.portfolio-page.section {
		margin-top: 6.5rem;
	}
	.portfolio.section .view-more-btn a{
		margin-bottom: 0px;
  		margin-top: 40px;
	}
    .portfolio-grid {
      display: grid;
      gap: 30px;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      padding: 0 20px;
    }

	.portfolio-item {
		position: relative;
		overflow: hidden;
		border-radius: 10px;
		height: 400px;
	}

    .portfolio-item img {
		width: 100%;
		transition: transform 0.3s ease;
		display: block;
		height: 100%;
		object-fit: cover;
		object-position: top;
	}

    .portfolio-item:hover img {
      transform: scale(1.1);
    }

    .portfolio-item .overlay {
      position: absolute;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.85);
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .portfolio-item:hover .overlay {
      opacity: 1;
    }

    .portfolio-item .overlay h3 {
      margin-bottom: 10px;
      font-size: 20px;
    }

    .portfolio-item .overlay a {
      color: #239e66;
      text-decoration: none;
      font-weight: bold;
      border: 1px solid #239e66;
      padding: 8px 20px;
      border-radius: 5px;
      transition: 0.3s;
    }

    .portfolio-item .overlay a:hover {
      background-color: #239e66;
      color: #fff;
    }

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  flex-wrap: wrap;
  gap: 6px;
}

.pagination-container button {
	background: #000;
	border: none;
	color: #fff;
	padding: 6px 14px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 14px;
}

.pagination-container button.active {
	background-color: #239e66;
	color: #fff;
}

.pagination-container button:hover {
	background-color: #239e66;
}

.pagination-container button.next {
  color: #fff;
  font-weight: bold;
}

  /*============================================ end =========================================*/

  .pricing-box {
  	color: #fff;
  	text-align: center;
  	background: #161616;
  	padding: 50px 0;
  }

  .fa-solid.fa-bullseye {
  	font-size: 54px;
  	margin-bottom: 27px;
  	color: #239e66;
  }

  .pricing-box h2 {
  	font-size: 26px;
  	margin-bottom: 14px;
  	font-weight: 600;
  }

  .pricing-box h3 {
  	font-size: 24px;
  	margin-bottom: 22px;
  	font-weight: 300;
  }

  .pricing-box p {
  	color: #9f9f9f;
  	padding: 8px;
  	margin: 0;
  }

  .pricing-box a {
  	padding: 10px 35px;
  	color: #fff;
  	background: #239e66;
  	text-decoration: none;
  }

  .pricing-box a:hover {
  	background: #1e6444;
  	transition: ease-in-out .5s;
  }

  .started-btn {
  	padding: 10px 0;
  	margin-top: 18px;
  }

  /*=================================================== end ==========================================*/
  .testimoni-left-content {
  	display: flex;
  	align-items: center;
  	gap: 15px;
  }

  .testimonial-slider {
  	color: #fff;
  	padding: 48px 40px;
  	background: #161616;
  }

  .testimonial-name-content {
  	display: flex;
  	justify-content: space-between;
  	align-items: first baseline;
  	margin-bottom: 23px;
  }

  .fa-solid.fa-quote-right {
  	font-size: 50px;
  	color: #239e66;
  }

  .testimoni-text-content p {
  	color: #9f9f9f;
  	font-size: 15px;
  	margin-bottom: 0;
  	line-height: 2;
  }

  .testimoni-left-content .testimonial-name span {
  	color: #9f9f9f;
  	font-size: 14px;
  	font-weight: 400;
  }

  .testimoni-left-content .testimonial-name h3 {
  	font-size: 15px;
  	font-weight: 400;
  }

  .testimoni-left-content .testimo-img img {
  	width: 54px;
  	height: 54px;
  	object-fit: cover;
  	border-radius: 50px;
  }

  .testimonial-flex {
  	display: flex;
  	gap: 30px;
  }

  .view-more-btn {
	text-align: center;
	max-width: max-content;
	margin: auto;
}
.view-more-btn a {
	display: block;
	padding: 10px 35px;
	background: #239e66;
	color: #fff;
	text-decoration: none;
	margin-bottom: 30px;
}
.view-more-btn a:hover {
	background: #1e6444;
	transition: ease-in-out .8s;
}

  .slider-container {
  	display: flex;
  	transition: transform 0.3s ease;
  	gap: 20px;
  	/* Add the desired gap between slider items */
  }


  .swiper {
  	width: 100%;
  	height: 100%;
  }

  .swiper-slide {
  	background: #161616;
  	padding: 48px 40px;
  	color: #fff;
  	animation: slideIn 0.5s forwards;
  }

  .swiper-slide img {
  	display: block;
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
  }

  .testimonials-content .swiper-wrapper {
  	z-index: 0;
  }

  .testimonials-content .swiper {
  	z-index: 0;
  	padding-bottom: 60px;
  }

  .testimonials-content .swiper-pagination-bullet.swiper-pagination-bullet-active {
  	background: #239e66;
  	opacity: 1;
  }

  .testimonials-content .swiper-pagination-bullet {
  	background: #239e66;
  	opacity: 0.6;
  }

  @keyframes slideIn {
  	from {
  		transform: translateX(100%);
  		/* Slide in from right */
  	}

  	to {
  		transform: translateX(0);
  		/* Slide to original position */
  	}
  }


  /*================================================== end ============================================*/

  /*================================================== end ====================================*/

  input:not(:last-child), #message, #email {
  	width: 100%;
  	background: #1c1c1c;
  	color: #707070;
  	padding: 10px 10px;
  	margin-bottom: 35px;
  	border: 0;
  	border-bottom: 2px solid #707070;
  	font-size: 18px;
  }

  #name {
  	margin-right: 20px;
  }

  .contact-content h1 {
  	color: #fff;
  	margin-bottom: 30px;
  	text-transform: capitalize;
  }

  input:focus-visible, #email:focus-visible, #message:focus-visible {
  	outline: 0;
  	border-bottom: 2px solid #239e66;
  	transition: border-color 0.3s ease-in-out;
  }

  .submit-button {
  	padding: 10px 40px;
  	background: #239e66;
  	border: 0;
  	color: #fff;
  	text-transform: capitalize;
  	font-size: 16px;
  }

  /*=============================== end ========================================*/
  .contact-info {
  	color: #fff;
  }

  .contact-info h2 {
  	margin-bottom: 6px;
  }

  .contact-info span {
  	color: #9f9f9f;
  }

  .contact-detail {
  	margin-top: 36px;
  }

  .contact-detail ul li {
  	display: flex;
  	align-items: center;
  	gap: 30px;
  }

  .contact-detail .fa-solid {
  	font-size: 30px;
  	width: 40px;
  	text-align: center;
  	color: #239e66;
  }

  .flex-details {
  	border-left: 1px solid #9f9f9f;
  	padding: 10px;
  	padding-left: 30px;
  }

  .flex-details h3 {
  	font-size: 16px;
  }

  .flex-details span {
  	font-size: 16px;
  }

  /*=========================================== end ==========================================*/
  .copy-text p {
  	margin: 0;
  	text-align: center;
  	color: #fff;
  }

  .copyrights {
  	background: #000;
  	padding: 20px 10px;
  	margin-top: 50px;
  }

  /* Dotted loading animation */
  .dots-loader {
  	display: inline-block;
  }

  .dots-loader span {
  	display: inline-block;
  	width: 8px;
  	height: 8px;
  	margin: 0 2px;
  	background-color: #555;
  	border-radius: 50%;
  	animation: blink 1.4s infinite both;
  }

  .dots-loader span:nth-child(2) {
  	animation-delay: 0.2s;
  }

  .dots-loader span:nth-child(3) {
  	animation-delay: 0.4s;
  }

  @keyframes blink {
  	0%, 80%, 100% {
  		opacity: 0;
  	}

  	40% {
  		opacity: 1;
  	}
  }

  .portfolio-modal {
	margin-top: 40px;
}
.portfolio-modal h2, .portfolio-modal p, .portfolio-modal a {
	color: #fff;
}