@import url('https://fonts.googleapis.com/css2?family=Inria+Sans:wght@400;700&family=Lato:wght@300;400;700;900&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Lato', sans-serif;
        }
        body {
            background-color: #ffff;
            overflow-x: hidden;
			align-items: center;
			color: #3B3A3A;
        }
		
		section{
			padding: 2vh;
		}
		
		h1{
			font-family: Inria Sans, sans-serif;
			text-align: center;
			font-size: 4.5vw; /*7.3vw
			font-size: inherit; */
			padding: 1rem, 2rem;
		}
		
		nav{
			width: 100%;
			height: 20vh;
			background: white;
			display: flex;
			justify-content: space-around;
			align-items: center;
			/*position: fixed; makes it sticky*/
		}
		nav .nav-container{
			background: white;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
		nav .logo{
			height: 1vh;
			width: 1vw;
			padding-right: 25vw;
			padding-left: 5vw;
			padding-bottom: 10vw;
		}
		
		.hamburg {
			cursor: pointer;
			position: absolute;
			right: 15px;
			top: 10px;
			color: black;
			font-size: 2.5rem;
			z-index: 1000;
		}

		.cancel {
			cursor: pointer;
			position: absolute;
			right: 15px;
			top: 10px;
			color: black;
			font-size: 2.5rem;
			z-index: 1000;
			opacity: 0; /* Initially hidden */
			pointer-events: none; /* Non-interactive initially */
			transition: opacity 0.3s ease;
		}

		/* Dropdown styling */
		.dropdown {
			z-index: 100;
			display: none;
			position: absolute;
			top: 0;
			transform: translateY(-500px);
			width: 100%;
			height: auto;
			backdrop-filter: blur(4px) brightness(40%);
			box-shadow: 0 0 20px black;
			transition: transform 0.3s ease, display 0s;
		}

		/* Dropdown active */
		.dropdown.active + .cancel {
			opacity: 1;
			pointer-events: auto;
		}
		
		/* Default State - Hidden */
		.hamburg, .cancel, .dropdown {
			display: none; /* Hide hamburger, cancel, and dropdown by default */
		}



		nav .nav-button button{
			width: 8vw;
			height: 50px;
			font-size: 1vw;
			margin-right: 10vw;
			margin-left: 10vw;
			padding: 8px 10px;
			border-radius: 50px;
			border: none;
			background-color: #17B1C3;
			color: white;
			cursor: pointer;
			transition: transform 0.3s ease; /* Smooth transition */
		}
		
		.nav-button button:hover{
			transform: scale(1.2); /*troubleshoot*/
		}

		.nav-container .links{
			display: flex;
			justify-content: space-evenly;
		}
		.nav-container .links a{
			position: relative;
			font-size: 0.9vw; /*1.2vw initially, caters to screens 1600px to 1900px*/
			color: black;
			margin: 0 25px 0 60px;
			text-decoration: none;
			font-weight: 550;
			transition: 0.3s linear;
		}
		.nav-container .links a::before{
		  position: absolute;
		  content: "";
		  bottom: -3px;
		  left: 0;
		  width: 0%;
		  height: 3px;
		  background-color: #17B1C3;
		  transition: 0.2s linear;
		}
		.nav-container .links a:hover::before{
		  width: 100%;
		}
		.nav-container .links a:hover{
			color: #17B1C3
		}
		
		.dropdown{
		  z-index: 100;
		  display:none;
		  position: absolute;
		  top: 0;
		  transform: translateY(-500px);
		  width: 100%;
		  height: auto;
		  backdrop-filter: blur(4px) brightness(40%);
		  box-shadow:  0 0 20px black;
		  transition: transform 0.3s ease, display 0s; /* Smooth animation */
		}

		.dropdown .links a{
		  display: flex;
		  color: white;
		  text-decoration: none;
		  justify-content: center;
		  padding: 15px 0;
		  align-items: center;
		  transition: 0.2s linear;
		}

		.dropdown .links a:hover{
		  background-color: #CBEFF3;
		}

        /* HERO TEST SECTION */
        /*.hero-test {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 80vh;
            /*background-color: #17B1C3; #17B1C3
            color: white;
            padding: 2rem;
            margin-bottom: 5vh;
        }

        .hero-content {
            display: flex;
            max-width: 1200px;
            width: 92%;
			background-color: #17B1C3;
        }

        .hero-text {
            flex: 1;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .hero-text h1 {
            font-family: 'Inria Sans', sans-serif;
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
        }
        .hero-text p {
            font-family: 'Lato', sans-serif;
            font-weight: 300;
            font-size: 1.3rem;
            margin-bottom: 2rem;
        }
        .contact-button {
            background-color: #CBEFF3;
            color: #17B1C3;
            padding: 1rem 2rem;
            width: 28%;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            cursor: pointer;
            font-weight: bold;
            transition: transform 0.3s ease;
            text-decoration: none; /* Remove underline
            text-align: center;
        }
        .contact-button:hover {
            transform: scale(1.1);
        } */

		.hero-test {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh; /* Adjusts based on screen height */
			padding: 5vh 5vw;
		}

		.hero-content {
			display: flex;
			background-color: #17B1C3;
			color: black;
			border-radius: 20px;
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
			overflow: hidden;
			width: 75%;
			max-width: 1400px;
			height: 100%;
			min-height: 500px;
		}

		.hero-image {
			flex: 0 0 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			background-color: #17B1C3;
			position: relative;
			width: 100%;
			height: auto;
			min-height: 100%;
		}

		.hero-img {
			width: 100%;
			height: auto;
			object-fit: cover;
			min-height: 100%;
			max-height: 100%;
		}

		.hero-text {
			flex: 1;
			padding: 2rem;
			display: flex;
			flex-direction: column;
			justify-content: center;
			background-color: #17B1C3;
			color: white;
			min-height: 100%;
		}


		.hero-text h1 {
			font-family: 'Inria Sans', sans-serif;
			font-weight: 700;
			margin-bottom: 10px;
			text-align: left;
			font-size: clamp(1.8rem, 3.5vw, 4rem);
		}

		.hero-text p {
			font-size: clamp(1rem, 1.5vw, 2rem);
			font-weight: 300;
		}

		.hero-services {
			margin-top: 10px;
		}

		.hero-services p {
			font-size: clamp(1rem, 1.3vw, 1.5rem);
			font-weight: 600;
		}

		.hero-services ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}

		.hero-services li {
			display: flex;
			align-items: center;
			margin-bottom: 2vh;
			line-height: 3vh;
			font-size: clamp(1rem, 1.3vw, 1.5rem);
			font-weight: 500;
		}

		.hero-services li img {
			margin-right: 15px;
			width: 45px;
			height: 45px;
		}

		/*.hero-image {
			flex: 0 0 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden; /* Ensures the image doesn't exceed its container
			background-color: #17B1C3;
			position: relative;
			width: 100%;
			height: 100%;
		}

		.hero-img {
			width: 100%;
			height: 100%;
			object-fit: cover; /* Ensures the image always covers the div
		}*/




			

        /* HEAD SECTION */
        .head {
            display: flex;
            align-items: stretch;
            justify-content: center;
            padding: 5rem 2rem;
            background-color: #fff;
            max-width: 90%;
            margin: 0 auto;
        }
        .head-content {
            flex: 1;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        /*.head-content h2 {
            font-size: 5.3rem;
            font-family: 'Inria Sans', sans-serif;
            color: #333;
            margin-bottom: 1rem;
        }
        .head-content p {
            font-size: 2.1rem;
            line-height: 1.8;
            color: #555;
            margin-bottom: 1.5rem;
			font-weight: 300;
        }*/
		
		.head-content h2 {
			font-size: clamp(2.5vw, 3vw, 4vw); /* Scales smoothly between different screen sizes */
			font-family: 'Inria Sans', sans-serif;
			color: #333;
            margin-bottom: 1rem;
		}

		.head-content p {
			font-size: clamp(1.3vw, 1.8vw, 2.3vw); /* Ensures readability while adapting to screen width */
			font-weight: 300;
			line-height: 1.8;
            color: #555;
		}

        .head-image {
			display: flex;
			flex: 1;
			align-items: center;
			justify-content: center;
        }
        .head-image img {
            object-fit: cover;
            border-radius: 15;
        }

        /* Section-Text Container */
        .section-text {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            padding: 8vh 4vw; /* Adjusted padding for spacing */
            box-sizing: border-box;
        }

        /* Image Container */
        .image-container {
            position: relative;
            flex: 1;
            max-width: 45%;
        }

        .image-container img {
            width: 100%;
            height: auto;
            border-radius: 15px;
        }

        /* Larger Icons */
        .image-container .icon {
            position: absolute;
            bottom: -65px;
            left: -16px;
            width: 32%; /* Larger icon size */
            height: auto;
        }

        .image-container .icon-right {
            position: absolute;
            bottom: -65px;
            right: -20px;
            width: 32%; /* Larger icon size */
            height: auto;
        }

        /* Text Container */
        .text-container {
            flex: 1;
            max-width: 50%;
            font-size: 2vw; /* Responsive font size */
			font-family: Lato;
			text-align: justify;
			font-weight: 300;
            line-height: 1.8;
            color: #444;
        }
		
		 .container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 40px;
            margin: 20px auto;
            max-width: 1200px;
        }

        /* Left Section - Counters */
        .counter-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 80px;
        }
		
		.counter h1{
			font-size: clamp(1.8rem, 5vw, 2.5rem) !important; /* Adjust min, preferred, and max size */
			font-weight: bold;
			text-align: left;
			color: #444;
			line-height: 1.2;
		}

        .counter-card {
			display: flex;
			flex-direction: column; /* Stack number & label vertically */
			justify-content: center; /* Centers content vertically */
			align-items: center; /* Centers content horizontally */
			width: 27.7vw; /* Adjusted size 27.7vw 532px*/
			height: 16.6vh; /* Adjusted size 16.6vw 319px*/
			background-color: #17B1C3;
			border-radius: 15px;
			color: white;
			padding: 40px 30px;
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
			text-align: center; /* Ensures text stays centered */
		}



        .counter-number {
			font-size: 4rem;
			font-weight: bold;
			text-align: center;
			margin-bottom: 10px;
		}


        .counter-label {
            /*margin-top: 5px;*/
            text-transform: uppercase;
			text-align: center;
            font-size: 1.33rem;
        }

        /* Right Section - Image */
        .image-section img {
			width: clamp(450px, 45vw, 700px); /* Ensures image scales between 450px and 700px */
			height: auto;
			max-width: 100%; /* Prevents overflow */
			object-fit: cover;
			border-radius: 15px;
		}


		
		/*.facebook-posts {
			padding: 2rem, 1rem;
		}
		
		Facebook Slider
		.slider-container {
			position: relative;
			width: 90%;
			max-width: 1200px;
			overflow: hidden;
			border: 1px solid #ddd;
			border-radius: 10px;
			background: #fff;
			margin: 0 auto;  Centers the slider 
		}

        .facebook-slider {
            display: flex;
            transition: transform 0.3s ease-in-out;
        }

        .fb-post-container {
            flex: 0 0 calc(100% / 3); /* Show 3 posts at a time 
            box-sizing: border-box;
            padding: 10px;
            height: 600px; /* Set a fixed height
            overflow: hidden;
        }

        .fb-post {
            width: 100%;
            height: 100%; /* Ensures it fills the container 
        }

        /* Navigation buttons
        .nav-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            border: none;
            border-radius: 50%;
            padding: 10px 15px;
            cursor: pointer;
            z-index: 10;
        }

        .nav-button.left {
            left: 10px;
        }

        .nav-button.right {
            right: 10px;
        }

        .nav-button:disabled {
            background-color: rgba(0, 0, 0, 0.2);
            cursor: not-allowed;
        } */
		
		
		/*Pricing Cards */
		.pricing-container{
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			width: 100%;
			height: auto;
			padding: 2vh, 0, 2vh, 0;

		}
		
		#pricing-title {
			font-size: clamp(2.5rem, 6vw, 4rem); /* Adjust size */
			font-weight: bold;
			text-align: center;
			color: #444;
			margin-bottom: 20px;
		}

		
		.pricing-container h1{
			align-self: center;
			font-size: 2.2vw; /*was 76px*/
			font-family: Lato;
		}

		.pricing-container ul{
			list-style: disc;
			text-align: left;
			padding-left: 2em;
			margin: 0;
			width: 100%;
			box-sizing: border-box;
		}

		.pricing {
			align-items: center;
			padding: 0 0 0 10vw;

		}

		.pricing-card-container{
			display: flex;
			flex-wrap: wrap;
			float:left;
			flex-direction: column;
			justify-content: center;
			flex-wrap: wrap;
			padding: 80px; /*  ori is 60 px, roo added cos gap doesnt do anything */
		   /* gap: 250px;
			margin-left: 100px; roo removed*/
			/* border: 2px solid red;*/
		}
		.card-pricing{
		   /* margin: 10px; roo removed*/
			width: 300px; /*250px*/
			height: 350px;
			flex: 1 1 500px; /* Allows the card to grow and shrink, setting a base width of 500px*/
			align-items: center;
			background-color: #CBEFF3;
			border-radius: 10px;
			/*border: 2px solid blue;*/
			box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
			cursor: auto;
		}
		
		.btn-container {
			position: relative;
			display: flex;
			flex-direction: column; /* Ensure vertical stacking */
			justify-content: center;
			align-items: center;
			width: 100%;
		}

		.pricing-logo {
			position: absolute;
			bottom: -35px; /* Keeps logo behind button */
			left: 50%; /* Centers it */
			transform: translateX(-50%); /* Ensures proper centering */
			width: clamp(70px, 10vw, 120px); /* Increased size */
			height: auto;
			z-index: 0; /* Keeps it behind the button */
			opacity: 0.9; /* Keeps slight transparency */
		}
		
		.btn {
			position: relative;
			z-index: 1; /* Ensure button stays on top */
		}

		.btn button {
			width: clamp(120px, 10vw, 200px); /* Responsive scaling */
			padding: clamp(8px, 1.5vh, 12px) clamp(12px, 2vw, 20px);
			border-radius: 50px;
			border: none;
			font-size: clamp(14px, 1.2vw, 18px);
			font-family: Inria Sans;
			background-color: #17B1C3;
			color: white;
			cursor: pointer;
			transition: transform 0.3s ease;
		}
		
		.card-pricing .btn button:hover{
			transform: scale(1.2); /*troubleshoot*/
		}
		
		.pricing-header-card {
			align-items: center;
		}
		
		.pricing-header-card h2{
			height: 60px;
			text-align: center;
			font-size: 22px;
			margin-top: 0px;
			font-family: Inria Sans;
			font-weight: bold;
			background-color: #17B1C3;
			color: white;
			border-radius: 10px;
			border-bottom-left-radius: 0px;
			border-bottom-right-radius: 0px;
		}
		
		/*Carousel */
		.carousel-container {
			width: 100%;
			/*max-width: 1200px;*/
			text-align: center;
			background-color: #CBEFF3;
			padding: 40px 0;
			margin: auto;
			overflow: hidden;
		}

		.carousel-title {
			font-weight: bold;
			color: #333;
			margin-bottom: 20px;
		}

		.card-wrapper {
		  max-width: 1100px;
		  margin: 0 60px 35px;
		  padding: 20px 10px;
		  overflow: hidden;
		}

		.card-list .card-item {
		  list-style: none;
		}

		.card-list .card-item .card-link {
		  display: block;
		  background: #17b1c3;
		  padding: 18px;
		  min-height: 500px;
		  max-height: 500px;
		  max-width: 250px;
		  user-select: none;
		  border-radius: 12px;
		  text-decoration: none;
		  border: 2px solid transparent;
		  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
		  transition: 0.2s ease;
		}

		.card-list .card-item .card-link:active {
		  cursor: grabbing;
		}

		.card-list .card-item .card-link:hover {
		  border-color: #5372F0;
		}

		.card-list .card-link .card-image {
		  width: 100%;
		  border-radius: 10px;
		  aspect-ratio: 16 / 9;
		  object-fit: cover;
		}

		/*.card-list .card-link .badge {
		  color: #5372F0;
		  width: fit-content;
		  padding: 8px 16px;
		  font-size: 0.95rem;
		  border-radius: 50px;
		  font-weight: 500;
		  background: #DDE4FF;
		  margin: 16px 0 18px;
		} */

		.card-list .card-link .card-title {
		  color: #fff;
		  font-size: 1.19rem;
		  font-weight: 600;
		}

		.card-list .card-link .card-button {
		  height: 35px;
		  width: 35px;
		  color: #5372F0;
		  margin: 30px 0 5px;
		  background: none;
		  cursor: pointer;
		  border-radius: 50%;
		  border: 2px solid #5372F0;
		  transform: rotate(-45deg);
		  transition: 0.4s ease;
		}

		.card-list .card-link:hover .card-button {
		  color: #fff;
		  background: #5372F0;
		}

		.card-wrapper .swiper-pagination-bullet {
		  height: 13px;
		  width: 13px;
		  opacity: 0.5;
		  background: #5372F0;
		}

		.card-wrapper .swiper-pagination-bullet-active {
		  opacity: 1;
		}

		.card-wrapper .swiper-slide-button {
		  color: #5372F0;
		  margin-top: -35px;
		}


		/* General Carousel Styling
		.testimonials {
			text-align: center;
			padding: 40px 0;
			background-color: #b3e6f0; /* Light blue background
		}

		.section-title {
			font-size: 2.8rem;
			font-weight: bold;
			color: #333;
			margin-bottom: 20px;
		}

		/* Carousel Container 
		.carousel {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			overflow: hidden;
			max-width: 80%;
			margin: auto;
		}

		/* Track for Sliding
		.carousel-track-container {
			overflow: hidden;
			width: 80%;
		}

		.carousel-track {
			display: flex;
			gap: 5.3vw;
			transition: transform 0.5s ease-in-out;
		}

		/* Individual Testimonial Cards 
		.testimonial-card {
			min-width: 16.09vw; /*309px
			max-width: 16.09vw;
			height: 56.98vh; /*543px
			background-color: #17B1C3;
			color: white;
			padding: 20px;
			border-radius: 10px;
			text-align: left;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.testimonial-text {
			font-size: 1.4rem;
			line-height: 1.5;
		}

		.testimonial-author {
			font-weight: bold;
			text-align: right;
			margin-top: 10px;
			font-size: 1.4rem;
		}


		/* Carousel Buttons 
		.carousel-btn {
			background-color: rgba(0, 0, 0, 0.2);
			color: white;
			border: none;
			font-size: 1.25rem;
			width: 50px;  /* Make it a perfect circle 
			height: 50px; /* Make it a perfect circle 
			padding: 0; /* Remove default padding 
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%; /* Ensures circular shape 
			cursor: pointer;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			transition: 0.3s;
		}


		.carousel-btn:hover {
			background-color: #17B1C3B3;
		}

		.prev {
			left: 0;
		}

		.next {
			right: 0;
		}
		

		
		/*Image Slider
		.container {
			padding: 2rem;
		}

		.slider-wrapper {
			position: relative;
			max-width: 90rem; /*48rem
			margin: 0 auto;
		}

		.image-slider {
			display: flex;
			aspect-ratio: 16 / 9;
			overflow-x: auto;
			scroll-snap-type: x mandatory;
			scroll-behavior: smooth;
			box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
			border-radius: 0.5rem;
			-ms-overflow-style: none; /* Hide scrollbar IE and Edge 
			scrollbar-width: none; /* Hide scrollbar Firefox 
		}

		.slider-wrapper .slider-button {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			background-color: #17B1C3;
			color: 3B3A3A;
			border: none;
			padding: 0.5rem 1rem;
			cursor: pointer;
			font-size: 1rem;
			border-radius: 0.25rem;
			z-index: 2;
		}

		#prev {
			left: 1rem;
		}

		#next {
			right: 1rem;
		}

		.slider-button:hover {
			background-color: rgba(255, 255, 255, 1);
		}

		/* Hide scrollbar for Chrome, Safari and Opera 
		.slider::-webkit-scrollbar {
			display: none;
		}

		.image-slider img {
			width: 100%;
			flex: 1 0 100%;
			scroll-snap-align: start;
			object-fit: cover;
		}

		.slider-nav {
			display: flex;
			column-gap: 1rem;
			position: absolute;
			bottom: 1.25rem;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;
		}

		.slider-nav a {
			width: 0.5rem;
			height: 0.5rem;
			border-radius: 50%;
			background-color: #fff;
			opacity: 0.75;
			transition: opacity ease 250ms;
		}

		.slider-nav a:hover {
			opacity: 1;
		*/

		/*.community-wording h1{
			padding-bottom: 0;
		}
		
		.slider-container {
			position: relative;
			width: 90%;
			height: auto;
			/*overflow: hidden;
			margin: 0 auto;
		}

		.slider-wrapper {
			position: relative;
			overflow-x: auto;
			scroll-behavior: smooth;
			width: 100%;
			height: auto;
			white-space: nowrap;
			cursor: grab;
		}

		.slider {
			display: flex;
			gap: 3vw;
			transition: transform 0.5s ease-in-out;
		}

		.card {
			min-width: 30%;
			height: 350px;
			background: #fff;
			border-radius: 10px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
			overflow: hidden;
		} */

		iframe {
			width: 100%;
			height: 100%;
			border: none;
		}

		/* Scrollbar Styling */
		.slider-wrapper::-webkit-scrollbar {
			height: 8px;
		}

		.slider-wrapper::-webkit-scrollbar-thumb {
			background: #17B1C3;
			border-radius: 10px;
		}

		.slider-wrapper::-webkit-scrollbar-track {
			background: rgba(0, 0, 0, 0.1);
		}

		/* Navigation Buttons 
		.prev-btn, .next-btn {
			position: absolute;
			display: flex !important;
			top: 50%;
			transform: translateY(-50%);
			background-color: grey;
			color: white;
			border: none;
			cursor: pointer;
			padding: 10px;
			font-size: 20px;
			border-radius: 50%;
			z-index: 100 !important;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 40px;
			height: 40px;
		}

		.prev-btn {
			left: 0;
		}

		.next-btn {
			right: 0px;
		}
		

		.prev-btn:hover, .next-btn:hover {
			background-color: rgba(0, 0, 0, 0.8);
		} */
		
		
		/*Container Form*/
		/* Base Styles */
		.new {
			display: flex;
			height: 100vh;
			background: white;
			padding: 10vh 0;
			justify-content: center;
			align-items: center;
		}

		.new-container {
			width: 100%;
			box-sizing: border-box;
			background-color: white;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		/* Form Styling */
		.new-container form {
			width: 700px; /* Reduced from 800px */
			height: auto;
			padding: 2rem;
			background-color: #CBEFF3;
			box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		/* Form Heading */
		.new-container form h1 {
			color: black;
			font-weight: 700;
			font-size: 1.8rem;
			text-align: center;
			margin-bottom: 0.5rem;
		}

		.new-container form p {
			color: black;
			font-size: 1.3rem;
			font-weight: 300;
			text-align: center;
			margin-bottom: 1rem;
		}

		/* Labels */
		.new-container form label {
			font-size: 1.2rem;
			font-weight: 500;
			color: #333;
			width: 100%;
			margin-top: 10px;
		}

		/* Input Fields */
		.new-container form input,
		.new-container form textarea {
			padding: 10px;
			border-radius: 5px;
			border: 1px solid #ccc;
			font-size: 1.2rem;
			margin: 5px 0;
			width: 100%; /* Default full-width */
		}

		/* Half-width Inputs */
		.input-group {
			display: flex;
			justify-content: space-between;
			width: 100%;
		}

		.input-group input {
			width: 48%;
		}

		/* Message Field */
		.new-container form textarea {
			height: 100px;
			resize: none;
		}

		/* Submit Button */
		.new-container form #button {
			border: none;
			background: #17B1C3;
			border-radius: 50px;
			font-weight: 600;
			font-size: 18px;
			color: white;
			width: 150px;
			padding: 12px;
			cursor: pointer;
			text-align: center;
			transition: transform 0.3s ease;
			margin-top: 15px;
		}

		.new-container form #button:hover {
			transform: scale(1.05);
		}

        /* Adjustments for responsiveness */
		/* For heights below 950px */
		@media screen and (max-height: 950px) {
			.hero-image {
				height: 100%; /* Adjust height dynamically */
				/*max-height: 70vh;  Add a cap to prevent overflowing */
			}

			.new {
				height: auto; /* Flexible height for the form container */
				/*padding: 5vh 2vw;  Add responsive padding */
			}
		}

		/* For heights below 890px */
		@media screen and (max-height: 890px) {
			.hero-image {
				height: 100%; /* Ensure it scales with content */
				max-height: 60vh;
			}
		}

		@media (min-width: 1601px) and (max-width: 1800px){
			/*Nav*/
			.nav-container .links a{
					margin: 0 7px 0 35px;
					font-size: 1rem;
			}
				
			nav .logo {
				height: 1vh;
				width: 1vw;
				padding-right: 25vw;
				padding-bottom: 12vw;
			}

			nav .nav-button button{
				width: 40%;
				height: auto;
				font-size: 26px;
			}
			
			.hero-content {
				width: 75%;
				max-width: 1400px;
				aspect-ratio: 3.5 / 2; /* Keeps proportions */
			}
			
			.hero-image{
				justify-content: flex-end;
				height: 100%;
			}
			
			.hero-img {
				width: auto;
				height: 100%;
				object-fit: cover;
				border-radius: 10px; /* Optional rounded corners*/
			}
			
			.head-content h2 {
				font-size: 4.5rem;
			}
			
			.head-content p{
				font-size: 1.8rem;
			}
			
		}
		@media (min-width: 1301px) and (max-width: 1600px){

			/*Nav*/
			.nav-container .links a{
				margin: 0 7px 0 35px;
				font-size: 90%;
			}
											
			nav .logo {
				height: 1vh;
				width: 1vw;
				padding-right: 25vw;
				padding-bottom: 12vw;
			}

			nav .nav-button button{
				width: 40%;
				height: auto;
				font-size: 26px;
			}
			
			.head-content h2{
				font-size: 3.3rem;
			}
			
			.head-content p{
				font-size: 1.6rem;
			}
			
			.hero-content {
				width: 87%;

				max-width: 1200px;
				aspect-ratio: 3.5 / 2;  /*Keeps proportions */
			}
			
			.hero-img {
				width: auto;
				height: 100%;
				object-fit: cover;
				/*border-radius: 10px;  Optional rounded corners */
			}
			
			.card-pricing {
				width: 250px;
				height: 300px;
			}
			
		}
		
		/*@media (max-width: 1420px) {
			.btn button{
				width: 150px;
				margin-left: 1vw; /*3.6vw
				font-size: 30px; 
				}*/
		}
		
		@media (max-width: 1300px){
			/*Nav*/
			.nav-container .links a{
					margin: 0 7px 0 35px;
					font-size: 1.2vw;
			}
				
			nav .logo {
				height: 1vh;
				width: 1vw;
				padding-right: 25vw;
				padding-bottom: 12vw;
			}

			nav .nav-button button{
				width: 40%;
				height: auto;
				font-size: 1.4vw;
			}
			
			.hero-image img {
				height: 100%; /* Use full height */
				width: 100%;  /* Stretch to fit container */
				object-fit: cover; /* Maintain aspect ratio while covering area */
			}

			
			.hero-content{
				overflow: hidden;
				width: 95%;
			}
			
			.contact-button{
				width: 40%;
			}
			
			.hero-services p{
				font-size: 2.2vw;
			}
			
			.hero-services li {
				font-size: 1.15rem;
			}
			
			.head-content{
				padding-right: 0;
				padding-left: 7rem;
			}
			
			.head-content h2 {
				font-size: 2vw; /* Adjust size for better scaling */
			}
			.head-content p {
				font-size: 1.5rem;
			}
			
			.head-image img{
				width: 120%;
			}
			
            .section {
                flex-direction: column;
                padding: 5vh 5vw;
            }
			
			.section-text .text-container{
				text-align: justify;
			}

            .image-container {
                max-width: 100%;
            }

            .image-container .icon {
                width: 30%; /* Slightly smaller for medium screens */
                bottom: -13%; 
                left: -1.98%;
                right: 1.67%;
            }
			
			.image-container .icon-right {
                width: 30%; /* Slightly smaller for medium screens */
                bottom: -13%;
                left: 72.67%;
                right: -50%;
            }

            .text-container {
                font-size: 1.2rem;
                text-align: center;
            }
			
			.card-pricing .btn button{
				size: 4.5vw;
				margin-left: 5vw; /*3.6vw*/
				font-size: 2vw; 
			}
			
			.community-wording{
				padding: 1.56vh 1.56vw 0 9.4vw;
			}
			
		}
        @media (max-width: 1200px) {
			/*Nav*/
			.nav-container .links a{
					margin: 0 7px 0 35px;
					font-size: 1.3vw;
					width: 60%;
			}
				
			nav .logo {
				width: 30%;
				height: 20%;
				padding-right: 25vw;
				padding-bottom: 12vw;
			}
			
			nav .logo img{
				size: 60%;
			}

			nav .nav-button button{
				width: 40%;
				height: auto;
				font-size: 1.2vw;
			}
			
			.hero-content{
				max-width: 1100px;
			}
			
			.hero-image img{
				height: 90%;
			}
			
			.contact-button{
				width: 40%;
			}
			
			.hero-services p{
				font-size: 2.2vw;
			}
			
			.hero-services li {
				font-size: 1.15rem;
			}
			
			.head-content{
				padding-right: 0;
				padding-left: 5.6rem;
			}
			
			.head-content h2 {
				font-size: 3.2rem;
			}
			.head-content p {
				font-size: 1.6rem;
			}
			
			.head-image img{
				width: 120%;
			}
			
			
            .section {
                flex-direction: column;
                padding: 5vh 5vw;
            }
			
			.section-text .text-container{
				text-align: justify;
			}

            .image-container {
                max-width: 90%;
            }

            .image-container .icon {
                width: 30%; /* Slightly smaller for medium screens */
                bottom: -9%; 
                left: -1.98%;
                right: 1.67%;
            }
			
			.image-container .icon-right {
                width: 30%; /* Slightly smaller for medium screens */
                bottom: -13%;
                left: 72.67%;
                right: -50%;
            }

            .text-container {
                font-size: 1.2rem;
                text-align: center;
            }
			
			.card-pricing .btn button{
				width: 100%;
				margin-left: auto; /*3.6vw*/
				font-size: 1.6vw; 
			}
			
			
			
			.community-wording{
				padding: 1.56vh 1.56vw 0 9.4vw;
				
			}
			
			.new-container form {
				width: 600px;
			}
        }
		
		@media (max-width: 1075px) {
			.btn button {
				width: 100% !important;
			}
		}
		
		@media (max-width: 1024px) {
			.testimonial-card {
				min-width: 260px;
				max-width: 260px;
			}
			
			.carousel-track-container {
				width: 90%;
			}

			.testimonial-card {
				min-width: 25vw; /* Make the cards wider on smaller screens */
				max-width: 25vw;
			}
			
			.btn-container .pricing-logo {
				display: none;
			}
		}
		
		@media (max-width: 980px) {
			nav {
				flex-direction: column; /* Stack vertically for smaller screens */
				height: auto; /* Adjust height */
				padding: 10px 20px; /* Reduce padding */
			}
			
			.nav-container .links {
				display: none; /* Hide the regular nav links */
			}

			.hamburg {
				display: block; /* Show hamburger icon */
			}

			.cancel {
				display: block; /* Enable cancel button */
			}

			.dropdown {
				display: block; /* Allow dropdown to be toggled */
			}

			nav .logo {
				align-self: center;
				height: 20vh; /* Increase size slightly */
				width: auto; /* Maintain proportions */
				padding-right: 0; /* Remove extra spacing */
			}

			.nav-container {
				flex-direction: column; /* Stack links vertically */
				align-items: center;
				width: 100%;
			}

			.nav-container .links {
				/*flex-direction: column; Make links vertical
				align-items: center;
				gap: 10px; /* Add spacing between links 
				padding: 1rem; */
				display: none;
			}

			/*.nav-container .links a {
				font-size: 1.3rem; /* Larger font size for readability
				margin: 10px 0; /* Increase spacing between links
			}*/
			
			/* Ensure the button resizes properly */
			.btn button {
				width: 80%; /* Increase button width to take more space */
				font-size: 1rem; /* Adjust text size */
				padding: 12px;
				text-align: center;
			}

			.btn-container {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			/* Fix navigation button */
			.nav-button button {
				width: 50%; /* Adjust width to fit smaller screens */
				font-size: 1rem;
				margin-right: 0;
				margin-left: 0;
			}

			/* Make the pricing cards more responsive */
			.pricing {
				display: flex;
				flex-wrap: wrap;
				justify-content: center; /* Center align the pricing cards */
			}

			.pricing-card-container {
				width: 100%; /* Ensure the cards take full width */
				text-align: center;
				padding: 10px; /* Adjust padding */
			}

			/* Ensure the button inside the pricing cards is responsive */
			.pricing-card-container .btn button {
				width: 70%;
				font-size: 1rem;
			}

			/* Fix any display issues for the buttons */
			.btn-container {
				width: 100%;
				display: flex;
				justify-content: center;
			}
			
			.dropdown {
				display: block;
				position: absolute;
				top: 0;
				width: 100%;
				transform: translateY(-500px);
				transition: transform 0.3s ease;
				background-color: #17B1C3;
				z-index: 10;
			}

			.dropdown .links a {
				padding: 10px;
				font-size: 1.2rem;
				text-align: center;
				display: block;
			}

			.dropdown .links a:hover {
				background-color: #CBEFF3;
			}

			nav .nav-button button {
				width: 100%; /* Make button span wider for smaller screens */
				height: 50px; /* Smaller height */
				font-size: 1.4rem; /* Adjust font size */
				margin: 15px 0; /* Add spacing below */
			}

			.hero-image{
				height: 100%;
			}
			
			.contact-button{
				width: 50%;
			}
			
			.hero-services p{
				font-size: 2vw;
			}
			
			.hero-services li {
				font-size: 1rem;
			}
			
			.head-content{
				padding-right: 0;
				padding-left: 10.5rem;
				text-align: center;
			}
			
			.head-content h2 {
				font-size: 3rem;
			}
			.head-content p {
				font-size: 1.4rem;
			}
			
			.head-image img{
				width: 150%;
			}
			
			.pricing{
				flex-direction: column;
				align-items: center;
			}
			
			.pricing-card-container {
				display: flex;
				flex-wrap: wrap; /* Allows wrapping for smaller screens */
				justify-content: center; /* Centers cards */
				padding: 10px;
			}

			.card-pricing {
				width: 90%; /* Adjusts width to fit smaller screens */
				max-width: 350px; /* Limits max size */
				margin: 10px auto; /* Centers each card */
			}
			
			.btn-container {
				display: flex;
				justify-content: center; /* Center button */
				align-items: center;
				width: 100%; /* Make sure parent scales */
				flex-wrap: wrap;
			}

			.card-pricing .btn button {
				width: clamp(120px, 50%, 200px); /* Adjust width for better scaling */
				font-size: clamp(12px, 2.5vw, 16px); /* Ensure text adjusts */
				padding: clamp(8px, 1.8vh, 14px) clamp(12px, 2.5vw, 24px);
			}
			
			.container {
                flex-direction: column;
            }

            .image-section img {
                width: 90%;
            }
			.card {
				flex: 0 0 calc(50% - 20px); /* 2 cards visible at a time */
			}
			
			.new-container form {
				width: 500px;
			}

			.new-container form input {
				width: 100%; /* Single column layout for inputs */
			}
			
        }
		
		@media (max-width: 900px) {
			.card {
				flex: 0 0 calc(50% - 20px); /* Show 2 cards */
			}
		}

        @media (max-width: 860px) {	
			.hero-image{
				display: none;
			}
			
			.contact-button{
				width: 30%;
				font-size: 2.4vw;
			}
			.hero-text{
				align-items: center;
			}
			
			.hero-text h1{
				font-size: 7vw;
				padding-top: 2vh;
			}
			
			.hero-text .hero-services{
				text-align: center;
			}
			
			.hero-services p{
				font-size: 4vw;
			}
			
			.hero-services li {
				font-size: 1.2rem;
				text-align: left;
			}
			
			.head-content{
				padding-right: 0;
				padding-left: 12.5rem;
				text-align: center;
			}
			
			.head-content h2 {
				font-size: 3rem;
			}
			.head-content p {
				font-size: 1.4rem;
			}
			
			.head-image img{
				width: 180%;
			}
			
			.section {
                padding: 4vh 4vw;
            }
			
			.image-section{
				display: none;
			}

            .image-container .icon {
                width: 30%; /* Slightly smaller for medium screens */
                bottom: -9%; 
                left: -1.98%;
                right: 1.67%;
            }
			
			.image-container .icon-right {
                width: 30%; /* Slightly smaller for medium screens */
                bottom: -13%;
                left: 72.67%;
                right: -50%;
            }

            .text-container {
                font-size: 1rem;
            }
			 .counter-card {
                width: 90%;
            }
			
			.card {
				flex: 0 0 100%; /* 1 card visible at a time */
			}
			.carousel-card {
				flex: 0 0 80%; /* Show 1 card at a time on smaller screens */
			}

			.carousel-btn {
				padding: 8px 16px;
			}
			.new-container form {
				width: 90%;             /* Use most of the screen width */
				padding: 1rem;
			}

			.new-container form input,
			.new-container form textarea {
				max-width: 100%;       /* Ensure inputs don't overflow */
			}
        }
		
		@media (max-width: 820px) {	
			.hero-image{
				display: none;
			}
			
			.contact-button{
				width: 30%;
				font-size: 2.4vw;
			}
			.hero-text{
				align-items: center;
			}
			
			.hero-text h1{
				font-size: 5.5vw;
				padding-top: 2vh;
			}
			
			.hero-text .hero-services{
				text-align: center;
			}
			
			.hero-services p{
				font-size: 4vw;
			}
			
			.hero-services li {
				font-size: 1.2rem;
				text-align: left;
			}
			
			.head{
				border: 2px solid #17B1C3;
				background-color: #ECEFF1;
				box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
				flex-direction: column;
			}
			
			.head-content{
				padding: 0;
				text-align: center;
			}
			
			.head-content h2 {
				font-size: 3rem;
			}
			.head-content p {
				font-size: 1.4rem;
				text-align: justify;
			}
			
			.head-image img{
				object-fit: contain;
			}
			
			.section {
                padding: 4vh 4vw;
            }

            .image-container .icon {
                width: 30%; /* Slightly smaller for medium screens */
                bottom: -9%; 
                left: -1.98%;
                right: 1.67%;
            }
			
			.image-container .icon-right {
                width: 30%; /* Slightly smaller for medium screens */
                bottom: -13%;
                left: 72.67%;
                right: -50%;
            }

            .text-container {
                font-size: 2vw;
				font-weight: 500;
            }
			
			.card-pricing h1{
				font-size: 5vw;
			}
			
			.pricing{
				margin-left: -10%;
			}
			
			.card-pricing .btn{
				margin-left: -20%;
			}
			
			.btn button {
				width: 100% !important;
				font-size: 0.9vw;
			}
			
			.pricing-header-card h2{
				font-size: 2.8vw;
			}
			
			
			.community-wording h1{
				font-size: 6.5vw;
			}
			
			
			 .counter-card {
                width: 90%;
            }
			
			.card {
				flex: 0 0 100%; /* 1 card visible at a time */
			}
			.carousel-card {
				flex: 0 0 80%; /* Show 1 card at a time on smaller screens */
			}

			.carousel-btn {
				padding: 8px 16px;
			}
			.new-container form {
				width: 90%;             /* Use most of the screen width */
				padding: 1rem;
			}

			.new-container form input,
			.new-container form textarea {
				max-width: 100%;       /* Ensure inputs don't overflow */
			}

        }
		
		@media (max-width: 768px) {
			.testimonial-card {
				min-width: 40vw;
				max-width: 40vw;
				height: auto;
			}
			
			.card-link {
				max-width: 700px !important;
			}
		}
		
		/* Media Query: Screens 730px and Below */
		@media (max-width: 730px) {
			.hero-text .contact-button{
				width: 50%;
				font-size: 4.3vw;
			}
			
			.section-text .text-container{
				font-size: 2.2vw;
				font-weight: 700;
			}
			
			.section-text .image-container{
				max-width: 50%;
			}
			
			.image-container img{
				max-height: 100%;
				max-width: 100%;
				height: auto;
				width: auto;
			}
			
			.pricing-container {
				flex-direction: column;
				align-items: center;
			}
			
			.pricing-container h1{
				font-size: 5vw;
			}
			
			.pricing-card-container {
				flex-direction: column; /* Stack cards vertically */
				align-items: center; /* Align cards centrally */
			}
			
			.pricing {
				flex-direction: column; /* Stack cards vertically */
				align-items: center; /* Align cards centrally */
			}

			.card-pricing {
				width: 100%; /* Use full width of the screen */
				margin: 10px 0;/* Adds vertical spacing */
				margin-left: 0 auto;
			}
			
			.card-pricing h1{
				font-size: 7vw;
			}
			
			.card-pricing .btn button{
				font-size: 4vw;
				margin-left: 15%;
			}
			
			.carousel-track .testimonial-card {
				min-width: 16.09vw; /*309px*/
				max-width: 16.09vw;
				height: 56.98vh; /*543px*/
			}
			
			.new-container form {
				width: 90%; /* Adjust width dynamically */
				padding: 1.5rem;
			}

			.new-container form h1 {
				font-size: 1.5rem;
			}

			.new-container form h4 {
				font-size: 1rem;
			}

			.new-container form input,
			.new-container form textarea {
				width: 100%; /* Full width for all inputs */
			}

			.new-container form #button {
				width: 100%; /* Full-width button for small screens */
			}
			
			.card-link {
				max-width: none !important;
			}
			
			.image-container img{
				max-height: 100%;
				max-width: 100%;
				height: auto;
				width: auto;
			}
		}
		
		@media (max-width: 600px) {
			.card {
				flex: 0 0 100%; /* Show 1 card */
			}

			.prev {
				left: -30px;
			}

			.next {
				right: -30px;
			}
			
			.hero-test {
				min-height: 1000px;
			}
			
			.hero-services li {
				font-size: 0.8rem;
			}
			
			.card-link {
				max-width: none !important;
			}
			
			.head {
				z-index: 0;
			}
			
			.head-image img {
				max-width: 80%;
				max-height: 80%;
				height: auto;
				width: auto;
				z-index: 0;
			}
			
			.head-content h2 {
				font-size: 7vw;
			}
			
			.head-content p {
				text-align: justify;
			}
			
			
			.section-text .text-container p{
				font-size: 2.2vw;
			}
			
			.carousel-title h1, .counter h1{
				font-size: 7vw !important;
			}
			
			h1{
				font-size: 7vw !important;
			}
			
			.community-wording h1{
				margin-bottom: -25%;
				margin-right: 5%;
			}
			
			.pricing-header-card h2{
				padding-top: 2vh !important;
				text-align: center !important;
			}
			
			.btn button {
				margin-right: 50px !important;
			}
			
			.slider-container .prev-btn, .slider-container .next-btn {
				display: none !important;
			}
		}

		/* Media Query: Screens 480px and Below */
		@media (max-width: 480px) {
			
			.hero-text h1{
				font-size: 9vw;
			}
			
			.hero-text p{
				font-size: 5vw;
			}
			
			.hero-text .contact-button{
				width: 90%;
				font-size: 5vw;
			}
			
			.hero-services p{
				font-size: 8vw;
			}
			
			.hero-services li {
				font-size: 1rem;
			}
			
			.head-content p{
				font-size: 3vw;
				font-weight: 700;
			}
			
			.section-text {
				padding: 2vh 4vw;
			}
			
			.text-container p{
				font-size: 6vw;
			}
			
			.image-container img{
				width: 180%:
			}
			
			.image-container .icon,
			.image-container .icon-right{
				display: none;
			}
			
			.counter-card {
				height: 20vh;
			}
			
			.pricing-header-card h2{
				font-size: 5vw;
				padding-top: 2vh !important;
				text-align: center !important;
			}
			
			.pricing-card-container {
				flex-direction: column; /* Stack cards vertically */
				align-items: center; /* Align cards centrally */
			}

			.card-pricing {
				width: 100%; /* Use full width of the screen */
				margin: 10px 0; /* Adds vertical spacing */
			}
			
			.btn button {
				margin-right: 50px !important;
			}
			
			.new-container form h1 {
				font-size: 1.5rem; /* Smaller headings */
			}

			.new-container form h4 {
				font-size: 1rem;
			}

			.new-container form textarea {
				height: 100px; /* Adjust height further */
			}
			
			.card {
				min-width: 90%;
			}

			.prev-btn, .next-btn {
				font-size: 16px;
				padding: 8px;
			}
			
			.testimonial-card {
				min-width: 80vw;
				max-width: 80vw;
			}
			
			.card-link {
				max-width: none !important;
			}

			.carousel-btn {
				width: 40px;
				height: 40px;
				font-size: 1.2rem;
			}
			
			.slider-container .prev-btn, .slider-container .next-btn {
				display: none !important;
			}
		}
		/* Media Query: Screens 360px and Below */
		@media (max-width: 360px) {
			
			body{
				flex-direction: column;
			}
			
			.hero-text h1{
				font-size: 6vw;
				padding-top: 4vh;
			}
			
			.hero-text p{
				font-size: 4vw;
			}
			
			.hero-text .contact-button{
				width: 90%;
				font-size: 5vw;
			}
			
			.hero-services p{
				font-size: 4vw;
			}
			
			.hero-services li {
				font-size: 0.7rem;
			}
			
			.text-container {
				padding: 0 !important;
			}
			
			.image-container img{
				width: 220%:
			}
			
			.image-container .icon,
			.image-container .icon-right{
				display: none;
			}
			
			.counter-card {
				min-height: 200px !important;
			}
			
			.counter-label {
				font-size: 0.5rem !important;
			}
			
			.pricing-header-card h2{
				font-size: 5vw;
				padding-top: 2vh !important;
				text-align: center !important;
			}
			
			.btn button {
				margin-right: 50px !important;
			}
			
			.pricing-card-container {
				flex-direction: column; /* Stack cards vertically */
				align-items: center; /* Align cards centrally */
			}
			
			.card-list {
				max-width: 500px;
			}

			.card-pricing {
				width: 100%; /* Use full width of the screen */
				margin: 10px 0; /* Adds vertical spacing */
			}
			
			.new-container form h1 {
				font-size: 1.5rem; /* Smaller headings */
			}

			.new-container form h4 {
				font-size: 1rem;
			}

			.new-container form textarea {
				height: 100px; /* Adjust height further */
			}
			
			.slider-container .prev-btn, .slider-container .next-btn {
				display: none !important;
			}
		}