.afr-navi{
	          	width: 100%;
		    				padding-left: 10px;
		}
	/* section main about us */
	.hero		{
		    			position: relative;
		    			text-align: left;
		   		 		display: flex;
		    			align-items: center;
		    			justify-content: center;
				background:white;
		  		}
		
	.hero img	{
		    			width: 500px;
		    			height: 700px;
			  	}
		
	.hero-text	{
		    			max-width: 50%;
				color: black;
				font-size: medium;
		 		line-height: 1.5;
				}
		
	.hero h1 	{
		    			
				font-weight: 300;
				letter-spacing: 2.6px;
				font-family: 'Poppins', sans-serif;
				font-size: 40px;
				font-weight: lighter;
				color: #c49b36;
				}
	.textdeco {
				/*font-family: 'Dancing Script', cursive;*/
				font-size: 100px;
				color: #002a43;
				position: relative;
				top: 40px;
				left: 35px;
				font-weight: bolder;
				text-align: left;
				display: block;
				text-transform: uppercase;
				font-family: 'ProximaNovaBold';
			}
		
	.hero p 	{
				text-align: justify; 
				font-family: 'ProximaNova';
				font-size: 16px;
				}
		
	.button 	{
		    			display: inline-block;
		    			background-color: #D1953A; 
				/* background-color:#E8CB3D;*/
		    			color: white;
		    			padding: 15px 20px;
		    			margin-top: 10px;
		    			text-transform: uppercase;
		    			font-weight: bold;
		    			border: none;
		    	border-radius: 80px;
		    			cursor: pointer;
				}
		
		.social-buttons-container {
									display: flex; /* Align buttons on the same line */
									gap: 15px; /* Space between buttons */
									padding: 30px 5px;
									margin-top: 20px;
						}
		
		/* Styling for each button */
		.social-button {
					background: #002a43;
					border: none;
					color: white;
					border-radius: 50%; /* Makes it circular */
					cursor: pointer;
					display: inline-block;
					align-items: center; /* Vertically center the icon */
					justify-content: center; /* Horizontally center the icon */
					width: 50px; /* Reduced width of the button */
					height: 50px; /* Reduced height of the button */
					font-size: 20px; /* Smaller font size for the icon */
					transition: background-color 0.3s ease;
				}
		
								/* Hover effect for the button */
		.social-button:hover {
									background-color: #D1953A;
								}
		
								/* Styling for the icons */
		.social-icons i {
									font-size: 24px; /* Reduced icon size */
								}
		
								/* Hover effect for the icons */
		.social-icons i:hover {
									color: #b88917;
								}
		
								
		
	@media (max-width: 768px) {
		
			 .mobile-header-image 	{
									width: 100% !important;
									height: auto !important;
				         			margin-left: -50px;
		       			 					margin-top: -50px;
									}
		
			.note-float-right 		{
									display: none;
									}
			
			.hero 					{
									max-width: 100%;
									overflow: hidden;
									flex-direction: column;
									text-align: center;
		        							align-items: center; /* Supaya semua elemen dalam hero selari di tengah */
									}
		
			.hero-text 	{
									max-width: 70%;
									
						}
			
			.hero h1 				{
									     font-size: 3rem;
										/* font-weight: 700; */
										text-align: center;
									}
			.textdeco {
				
				        font-size: 90px;
						top: 30px;
						left: -2px;
						font-weight: bolder;
						text-align: center;
			}
		
			.social-buttons-container {
										display: flex; /* Align buttons on the same line */
										gap: 10px; /* Space between buttons */
										padding: 20px 5px;
										justify-content: space-evenly;
										align-items: center;
									}
				
			}
		
		@media (min-width: 769px) {
			.hero{
		    				padding-left: 20px;
			}
	
		            .mobile-header-image 	{
		               						display: none;
		            						}
	
		            .desktop-only 			{
		                 					width: 100%;
		    								height:100%;
		            						}
		        	} 
	
		
	/* section award */
		
		
		.awards-section {
								background: url(https://afrproperty.onpay.my/media/uploads/afrteam.jpg);
								position: relative;
								z-index: 1;
								text-align: center;
								padding: 45px 0 60px;
								background-repeat: no-repeat;
		   	 							background-size: 100%;
							}
		
		.awards-section ::before {
								content: '';
								display: block;
								position: absolute;
								width: 100%;
								height: 100%;
								top: 0;
								left: 0;
								z-index: -1;
								background: rgba(0,42,67,0.7);
							}
		
		
		.awards-section h2 {
							font-size: 34px;
							font-weight: bold;
							color: #c49b36; /* Gold Color */
							margin-bottom: 40px;
							text-align: center;
							}
		
		.awards-section span.textdecoh2A {
							color: white;
							font-family: 'Dancing Script', cursive;
							font-size: 100px;
							font-weight: bolder;
							display: block;
							margin-top: -50px;
							margin-bottom: -30px;
		}
		
		.award-container{
			display: inline-flex;
			justify-content: center;
		}
		
		.award {
			vertical-align: top;
		}
		
		.award img {
		
			width: 100%;
		}
		
		@keyframes fadeInRight{
		  0% {
			  opacity: 0;
			  transform: translate3d(100%, 0, 0);
		  }
		
		  100% {
			  opacity: 1;
			  transform: none;
		  }
		}
		.animated {
			animation-duration: 1s;
			animation-fill-mode: both;
		}
		.animated.fadeInRight {
			animation-name: fadeInRight;
		}
		
		fadeInRight animation {
			opacity: 1;
			transform: translate3d(0px, 0px, 0px);
		}
		
		
		/* Section OUR VALUE */
		         
		.ourvalue 	{
				 max-width: 1200px;
				 margin: auto;
				background-color: white;
		 				}
		
		.ourvalue h2 	{
					padding: 15px;
					font-size: 80px;
					font-weight: bolder;
					color: #c49b36;
					margin-bottom: 30px;
					text-align: center;
					font-family: 'Poppins', sans-serif;
					letter-spacing: 0.6px;
					text-transform: uppercase;
					margin-left: -50px;
				}
		         			
		
		.textdecoh2{
				font-family: 'Dancing Script', cursive;
				font-size: 80px;
				color: #002a43;
				font-weight: bolder;
				text-align: center;
				display: block;
				margin-top: -109px;
				margin-bottom: 20px;
		}
		
		 /* Flexbox Container */
		    .features-container {
						 	display: flex;
							flex-wrap: wrap; /* Pastikan wrap bila cukup 2 */
							justify-content: center; /* Tengah pada semua saiz */
							align-items: stretch;  
							gap: 20px;
							padding-left: 20px;
							padding-right: 20px;
							padding-bottom: 20px;
							
		 						}
		 
		     /* Feature Box */
		   .feature-box {
					 	background-color: white;
						padding: 30px;
						border-radius: 20px;
						width: 100%; /* Full width by default */
						max-width: 350px;
						text-align: center;
						box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
						display: flex;
						flex-direction: column;
						align-items: center;
						position: relative;
						min-height: 320px;
		        		}
		
	.feature-box:hover{
						    transform: scale(1.02);
		   							background-color: rgba(255, 255, 255, 0.3);
					}
		
	.feature-box h3 {
					font-size: 20px;
					font-weight: bolder;
					margin-bottom: 18px;
		        			}
		
		
	.feature-box p {
					font-family: 'ProximaNova';
					font-size: 14px;
					margin-bottom: auto; /* Pushes the icon to the bottom */
		        			}
		   
	/* Fixed Icon Placement */
		 	.feature-icon {
					width: 80px;
					height: 80px;
					border-radius: 50%;
					background: #163c53;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					bottom: -40px;
		        			}
		
	.feature-icon img {
					width: 50px;
					height: auto;
		        			}
		
		    @media (max-width: 768px) {
	 .features-container{
		    row-gap: 60px;
			column-gap: 20px;
		}
			.feature-box {
				width: 45%; /* 2 per row */
				margin-bottom: 20px;
				justify-content: center;
			}
		}
		
		
		@media (min-width: 769px) {
			.feature-box {
				width: 23%; /* 4 per row */
			}
		}