/* 1200px and below (Large screens) */
@media (max-width: 1200px) {
	.hero-title {
		font-size: 38px;
		padding-top: 20px;
	}
	.hero-subtitle {
		font-size: 17px;
	}
	.discover-btn,
	.quote-btn,
	.visit-btn,
	.explore-btn{
		font-size: 17px;
		padding: 10px 28px;
	}
	.client-logos img {
		max-width: 120px;
		
	}
}

/* 992px and below (Medium screens - tablets) */
@media (max-width: 992px) {
	.hero-title {
		font-size: 34px;
	}
	.hero-subtitle {
		font-size: 16px;
	}
	.client-logos .row {
		flex-wrap: wrap;
	}
	.client-logos {
		margin-bottom: 20px;
		text-align: center;
	}
	.client-logos img {
		max-width: 100px;
	}
	.rating-item {
		margin-bottom: 20px;
	}
}

/* 768px and below (Small tablets & large phones) */
@media (max-width: 768px) {
	.hero-title {
		font-size: 30px;
	}
	.hero-subtitle {
		font-size: 15px;
		padding: 0 10px;
	}
	.discover-btn,
	.quote-btn,
	.visit-btn,
	.explore-btn {
		font-size: 16px;
		padding: 10px 24px;
		
	}
	.client-logos img {
		max-width: 90px;
	}
	.rating-stars span {
		font-size: 18px;
	}
	.rating-logo {
		max-width: 80px;
	}
}

/* 480px and below (Mobile phones) */
@media (max-width: 480px) {
	.hero-title {
		font-size: 26px;
	}
	.hero-subtitle {
		font-size: 14px;
	}
	.discover-btn,
	.quote-btn,
	.visit-btn,
	.explore-btn {
		font-size: 15px;
		padding: 10px 20px;
		width: 100%;
		text-align: center;
		margin-top: 15px;
	}
	.client-logos {
		flex: 0 0 50%;
		max-width: 50%;
		padding: 10px;
	}
	.client-logos img {
		max-width: 80px;
	}
	.rating-logo {
		width: 70px;
	}
	.rating-stars {
		font-size: 16px;
	}
}

		.hero-title .highlight {
			animation: colorCycle 15s linear infinite;
		}



		.hero-subtitle {
			font-size: 18px;
			color: #333;
			margin-bottom: 30px;
		}


		.discover-btn {
			position: relative;
			background-color: #6CB148;
			border: 2px solid transparent;
			/* always present */
			padding: 12px 32px;
			border-radius: 30px;
			font-weight: 700;
			font-size: 18px;
			color: white;
			text-decoration: none;
			overflow: hidden;
			transition: color 0.4s, border-color 0.4s, background-color 0.4s;
			text-transform: none;
			margin-top: 30px;
		}


		.discover-btn::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background-color: #6CB148;
			transition: left 0.4s ease-out;
			z-index: 1;
		}

		.discover-btn:hover::before {
			left: 100%;
		}

		.discover-btn:hover {
			color: black;
			border: 2px solid black;
			background-color: transparent;
			z-index: 2;
		}

		.discover-btn span,
		.discover-btn .arrow {
			position: relative;
			z-index: 2;
			transition: color 0.4s;
		}

		.quote-btn {
			position: relative;
			background-color: #6CB148;
			border: 2px solid transparent;
			/* always present */
			padding: 12px 32px;
			border-radius: 30px;
			font-weight: 700;
			font-size: 18px;
			color: white;
			text-decoration: none;
			overflow: hidden;
			transition: color 0.4s, border-color 0.4s, background-color 0.4s;
			text-transform: none;

		}


		.quote-btn::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background-color: #6CB148;
			transition: left 0.4s ease-out;
			z-index: 1;
		}

		.quote-btn:hover::before {
			left: 100%;
		}

		.quote-btn:hover {
			color: black;
			border: 2px solid black;
			background-color: transparent;
			z-index: 2;
		}

		.quote-btn span,
		.quote-btn .arrow {
			position: relative;
			z-index: 2;
			transition: color 0.4s;
		}

		.visit-btn {
			position: relative;
			background-color: #ccebf8;
			border: 2px solid #0099DB;
			padding: 12px 32px;
			border-radius: 30px;
			font-weight: 700;
			font-size: 18px;
			color: black;
			text-decoration: none;
			overflow: hidden;
			transition: color 0.4s, border-color 0.4s, background-color 0.4s;
			text-transform: none;
			margin-top: 30px;
			margin-right: 10px;
		}


		.visit-btn::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background-color: #ccebf8;
			transition: left 0.4s ease-out;
			z-index: 1;
		}

		.visit-btn:hover::before {
			left: 100%;
		}

		.visit-btn:hover {
			color: black;
			border: 2px solid black;
			background-color: transparent;
			z-index: 2;
		}

		.visit-btn span,
		.visit-btn .arrow {
			position: relative;
			z-index: 2;
			transition: color 0.4s;
		}


		.explore-btn {
			position: relative;
			background-color: #0099DB;
			border: 2px solid transparent;
			padding: 12px 32px;
			border-radius: 30px;
			font-weight: 700;
			font-size: 18px;
			color: white;
			text-decoration: none;
			overflow: hidden;
			transition: color 0.4s, border-color 0.4s, background-color 0.4s;
			text-transform: none;
			margin-top: 30px;
		}


		.explore-btn::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background-color: #0099DB;
			transition: left 0.4s ease-out;
			z-index: 1;
		}

		.explore-btn:hover::before {
			left: 100%;
		}

		.explore-btn:hover {
			color: black;
			border: 2px solid black;
			background-color: transparent;
			z-index: 2;
		}

		.explore-btn span,
		.explore-btn .arrow {
			position: relative;
			z-index: 2;
			transition: color 0.4s;
		}


	


		
		.client-logos {
			margin-top: 60px;
			display : flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.client-logos .logo-row1 {
			display: flex;
			flex-direction: row;
			gap : 1rem;
		}

		.client-logos .logo-row1  img{
			max-width: 200px;
			border-radius: 15px !important;
			 
		}

		.client-logos .logo-row2 {
			display: flex;
			flex-direction: row;
			gap : 1rem;
		}

		.client-logos .logo-row2  img{
			max-width: 200px;
			border-radius: 15%;
		}



		#ftco-navbar {
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

			z-index: 1030;

		}


		.ratings-section {
			padding: 20px 0;
		}

		.rating-item {
			text-align: center;
			margin: 10px;
		}

		.rating-logo {

			display: block;
			margin: 0 auto;
			/* width: 100px; */
		}

		.rating-stars {
			margin-bottom: 20px;
		}

		.fa-star {
			color: #ffcc00;
			font-size: 20px;
		}
        .hero-section {
			background: linear-gradient(to bottom, #d6f5ec, #ffffff);
			padding: 60px 20px;
		}

		.hero-title {
			font-size: 60px;
			font-weight: bold;
			line-height: 1.2;
			margin-bottom: 20px;
			color: black;
			
		
		}

		.hero-title .highlight {
			color: #6d8eff;
		}

		@keyframes colorCycle {
			0% {
				color: #6610f2;
			}


			25% {
				color: #0d6efd;
			}


			50% {
				color: #04d550;
			}


			75% {
				color: #198754;
			}


			100% {
				color: #6f42c1;
			}


		}
		.logo-row1{
			display: flex;
		}
		.col-auto{
			height: 100px;
		}