body {
    margin: 0;
    font-family: 'Nunito', sans-serif;
	color: #1f2e36;
	background: url('triangle-mosaic.png');
}

header {
    background: 
        linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 40%),
		/*linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), /* Black overlay with 60% opacity */
        /*linear-gradient(rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.6)), /* Black overlay with 60% opacity */
        url('covers-1.webp') no-repeat top center/cover; /* Background image */
		transition: background 1s ease-in-out; /* Smooth transition for background change */     
	}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.top-bar .logo {
    height: 80px;
}

.header-content {
    text-align: center;
    color: white;
	padding: 100px 0;
}


#text {
    font-size: 4em;
	font-weight: bolder;
    animation: blink-caret 0.75s step-end infinite;
	text-align: center;
	padding: 50px 0;
	text-shadow: 6px 0px 6px rgba(103, 13, 31, 1);
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: black; }
}

header button { margin: 0 auto 40px; }
.call-button {
    background: linear-gradient(to right, #00b09b, #96c93d);
    color: white;
    border: none;
    padding: 1em 2em;
    font-size: 1.2em;
    cursor: pointer;
    margin-top: 20px;
    border-radius: 25px; /* Make it rounded */
    display: flex;
    align-items: center;
    justify-content: center;
}

.call-button:hover {
    background: linear-gradient(to right, #96c93d, #00b09b);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds a shadow effect */
    transform: scale(1.05); /* Slightly enlarges the button */
    transition: all 0.3s ease; /* Smooth transition for the hover effect */
}


.call-button .fab.fa-whatsapp {
    font-size: 1.5em; /* Adjust the size as needed */
    margin-right: 10px;
}


.why-choose-us {
    text-align: center;
    padding: 4em 0;
    background-color: #f9f9f9;
}

.why-choose-us h2 { padding: 10px 0; margin: 0 0 30px;  background: linear-gradient(to right, #007bff, #ff77e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }

/* Container for the icons */
.icons {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap onto multiple lines */
    justify-content: center;
    gap: 2em;
    padding: 1em; /* Add padding around the container */
	width: 70%;
	margin: 0 auto;
}

/* Individual icon item styling */
.icon-item {
    display: flex;
    align-items: flex-start; /* Align items to the start */
	flex-direction: column; /* Stack items vertically */
    background: white;
    padding: 2em;
    border: 1px solid #ddd;
    border-radius: 10px; /* Adjusted for better aesthetics */
    text-align: left; /* Align text to the left */
    flex: 1 1 calc(33.333% - 2em); /* Adjust width for 3 icons per row with gap */
    box-sizing: border-box; /* Ensure padding and border are included in the width */
    box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.1);
    margin-bottom: 2em; /* Add bottom margin for spacing */
}

/* Hover state for icon item */
.icon-item:hover {
    transform: translateY(-10px); /* Slightly pop up */
    box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.2); /* Enhance shadow effect */
}

/* Container for icon and title */
.icon-title {
    display: flex;
    align-items: center; /* Align items vertically centered */
    margin-bottom: 1em; /* Space between title and description */
}

/* Styling for the icon itself */
.icon {
    height: 70px; /* Make icon bigger */
    width: 70px; /* Ensure consistency */
    background: linear-gradient(to bottom right, #007bff, #ff77e9); /* Gradient shade of blue and pink */
    margin-right: 1em; /* Space between icon and text */
    border-radius: 50%; /* Make the icon circular */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; /* Icon color */
    font-size: 2em; /* Increase icon font size */
    flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Styling for the title and description */
.icon-item h3 {
    margin: 0;
    font-size: 1.2em; /* Smaller font size for title */
    color: #333; /* Darker title color */
	padding: 0 15px 15px 0;
	border-bottom: 1px solid #ccc;
}

.icon-item p {
    margin: 0.5em 0 0;
    font-size: 0.9em; /* Smaller font size for description */
    color: #555; /* Faint black color */
    line-height: 1.6; /* Increased line height */
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.icons { width: 80%; }
    .icon-item {
        flex: 1 1 calc(50% - 2em); /* Adjust to 2 icons per row on medium screens */
    }
}

@media (max-width: 480px) {
    .icon-item {
        flex: 1 1 calc(100% - 2em); /* Adjust to 1 icon per row on small screens */
	}
	.icon-title { flex-direction: column; align-items: normal; }
	.icon { margin: 0.6em 0; }
}



.servis, .faq, .siapakami, .borang {
    padding: 2em 0;
    text-align: center;
}

footer {
    background-color: #8B0000; /* Dark red background */
    color: white;
    padding: 1em 0;
}

footer p {
    text-align: center;
}

footer a {
    color: #FFD700; /* Gold color for links */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease; /* Smooth transition for hover effect */
}

footer a:hover {
    color: #FFA500; /* Orange color for hover */
}

footer p.copyright { padding: 10px 0; margin: 0 auto; width: 50%; font-size: 0.8em; border-top: 1px dashed yellow; }
footer p.copyright a { color: #fff; }
footer p.copyright a:hover { text-decoration: underline; }

/* Mobile styles */
@media (max-width: 600px) {
    .top-bar {
        flex-direction: column; /* Stack items vertically */
        padding: 25px;
    }

    .top-bar > * {
        margin-bottom: 10px; /* Space between items */
    }

    .top-bar > *:last-child {
        margin-bottom: 0; /* Remove space after the last item */
    }
	
	.top-bar button { display: none; }
	
	#text { font-size: 2.3em; line-height: normal; padding: 0 20px; min-height: 200px;     display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
    text-align: center; /* Center the text */ text-shadow: 6px 0px 6px rgba(103, 13, 31, 1)}
}

/* FOR SIAPA KAMI */
/* General section styles */
.siapakami {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 2em 0;
    text-align: left; /* Left-align text */
    margin: 0 auto;
    max-width: 1280px; /* Center section */
}

	
	
/* Image styling */
.siapakami img {
    flex: 1 1 300px;
    max-width: 100%;
    height: auto;
    margin-right: 2em; /* Space between image and text */
	/*box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.15);*/
}

/* Text styling */
.siapakami p {
    flex: 2 1 500px;
    font-size: 1.2em;
    line-height: 1.6;
    margin: 0;
	align-self: flex-start; /* Align the paragraph to the top */
	padding: 24px 0 0; 
}

.siapakami em { 
font-family: 'Great Vibes', cursive; /* Apply cursive font */
font-weight: 100; /* Thin weight */ 
font-size: 2.2em;
color: #666;
}

.siapakami b { color: #8B0000; }

/* Header styling */
.siapakami small { text-align: center; margin: 20px 0 10px; width: 100%;  } 
.siapakami h1 {
    font-size: 2em;
    color: #8B0000; /* Dark red color */
    margin:0 0 20px; 
	width: 100%;
	text-transform: uppercase;
	text-align: center; 
}

.seo-hidden { display: none; }

/* Responsive adjustments */
@media (max-width: 768px) {
	.ourclient { padding: 0 2em; }
	
    .siapakami {
        flex-direction: column;
        text-align: center; /* Center text on smaller devices */
    }
    .siapakami img {
        margin-right: 0;
        margin-bottom: 1em; /* Space between image and text */
    }
    .siapakami p {
        font-size: 1em;
		padding: 0 15px;
		text-align: left;
    }
    .siapakami h2 {
        font-size: 2em;
    }
	footer { padding: 1em;
}

@media (max-width: 480px) {
    .siapakami p {
        font-size: 0.9em;
		padding: 0 15px;
		text-align: left;
    }
    .siapakami h2 {
        font-size: 1.8em;
    }
	footer { padding: 1em;
}