:root {
    --primary-color: #FD6602;
    --secondary-color: #C43C79;
    --text-color: #333;
    --background-color: #FAFAFA;
    --font-family: 'Play', sans-serif;
    --heading-font: 'Lato', sans-serif;
}

/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* global font change where allowed*/
h1,h2,h3,h4,h5,h6 {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    /* Use the bold weight for headings */
    color: #FD6602;
    font-size: calc(1.5em + 2vw);
    /* Adjust size depending on viewport width */
}

/* Body styling */
body {
    font-family: 'Play', sans-serif;
    background-color: #ffffff;
    color: #333;
    padding-block-start: 100px;
    /* Prevents content from hiding under the fixed header */
}

/* Dimming the background */
body.dimmed::before {
    content: "";
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
    z-index: 1999; /* Below the focused image */
}

/* Header styling */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FAFAFA;
    padding: 1.1em;
    color: #fff;
    position: fixed;
    inset-block-start: 0;
    inline-size: 100%;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    z-index: 1000;
}

h1 {
    text-align: center;
    font-size: 3em;
    /* Larger title */
    margin-block-end: 40px;
    /* Space below the title */
    margin-block-start: 80px;
    /*Space above the title*/
    color: #333;
}

nav {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-grow: 1;
    justify-content: center;
    font-size: 1.2em;
}

nav a {
    color: #fff;
    background-color: #C43C79;
    padding: 0.5em 1.2em;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
}

nav a:hover {
    background-color: #fff;
    color: #FD6602;
}

/* Basic styling for the nav links */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown content box */
.dropdown-content {
    display: none;
    /* Hidden by default */
    position: absolute;
    background-color: #ffffff;
    /* White background for dropdown */
    border: 1px solid #ddd;
    padding: 0.3em 0;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    font-size: 0.7em;
    flex-direction: column;
    min-inline-size: 160px;
}

/* Links inside the dropdown with separate styling */
.dropdown-content a {
    display: block;
    padding: 8px 16px;
    text-align: start;
    color: #FD6602;
    /* Orange text color for dropdown links */
    background-color: #ffffff;
    /* White background specifically for dropdown links */
    text-decoration: none;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

/* Hover effect specifically for dropdown links */
.dropdown-content a:hover {
    background-color: #C43C79;
    /* Pinkish background color on hover for dropdown items */
    color: #ffffff;
    /* White text on hover */
}

/* Show dropdown content on hover and keep it visible */
.nav-dropdown:hover .dropdown-content,
.nav-dropdown:focus-within .dropdown-content {
    display: flex;
    flex-direction: column;
}

.hamburger-menu {
    display: none;
    font-size: 1.35rem;
    cursor: pointer;
    color: var(--primary-color);
    margin-inline-end:1em;
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 1em;
    transform: translateY(-50%); /* Proper vertical centering */
}

/* Mobile Navigation */
nav.mobile-nav {
    display: none; /* Hidden by default */
    flex-direction: column;
    gap: 0; /* Remove extra gaps between menu items */
    background-color: #C43C79; /* Menu background color */
    position: absolute; /* Position relative to the hamburger menu */
    inset-block-start: 100%; /* Position below the hamburger menu */
    inset-inline-end: 1em; /* Align to the right under the hamburger */
    inline-size: 100px; /* Make the menu smaller */
    border-radius: 5px; /* Add rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Add a shadow */
    z-index: 1000;
    overflow: hidden; /* Ensure no extra space outside the menu */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

nav.mobile-nav.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

nav.mobile-nav a {
    display: block; /* Each link as a block for easy clickability */
    color: #fff; /* White text */
    padding: 0.6em 0.5em; /* Adjust padding to reduce space */
    text-align: start; /* Align text to the left */
    text-decoration: none;
    font-size: 0.63rem; /* Reduce font size */
    background-color: transparent; /* Default background is transparent */
    border-block-end: 1px solid #fff; /* Add separator lines between tabs */
    transition: background 0.3s, color 0.3s;
}

nav.mobile-nav a:hover {
    background-color: #FD6602;
    color: #fff;
}

/* Remove border for the last menu item */
nav.mobile-nav a:last-child {
    border-block-end: none;
}


.logo-container {
    display: flex;
    align-items: center;
}

.logo {
    inline-size: 60px;
    animation: flip 5s linear infinite;
}

.section-wrapper {
    background-color: #ffffff;
    padding: 100px 0;
}

/* Enlarged state for service items */
.service-item.focused {
    position: fixed;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%) scale(1.5); /* Enlarge and center */
    z-index: 2000;
    background: #fff;
    box-shadow: 0 0 15px #C43C79, 0 0 30px #fff, 0 0 45px rgba(196, 60, 121, 0.8);
    border-radius: 10px;
}


.banner-spacer {
    margin-block-end: 150px;
}

/* Exclude specific section spacing if needed */
section.banner {
    margin-block-start: -58px;
    margin-block-end: 0;
    justify-self: center;
    max-block-size: 80%;
}

/* Styling for the banner section */
.banner {
    background-image: url('images/clean-banner.jpg');
    background-size: cover;
    background-position: center;
    block-size: 620px;
    inline-size: 100%;
    max-block-size: 80vh;
    margin: 0; /* Removes default margin */
    padding: 0; /* Removes padding */
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; /* Align items to the bottom */
    overflow: hidden;
    position: relative; /* Ensure no extra spacing due to positioning */
    inset-block-start: 50px; /* Ensure alignment with the header */
}

.banner h1 {
    font-size: 2.5em;
    margin-block-end: 0.5em;
}

.banner p {
    font-size: 1.2em;
    margin-block-end: 1.5em;
    max-inline-size: 700px;
}

.banner button {
    background-color: #FD6602;
    color: #fff;
    border: none;
    margin: 0;
    padding: 0.7em 1.5em;
    font-size: 1em;
    border-radius: 5px;
    cursor: pointer;
    margin-inline-start: 55px;
    transition: background 0.3s;
    animation: pulse 1.5s infinite;
    position: relative; /* Keeps the button in the banner flow */
    margin-block-end: 20px; /* Adds spacing from the bottom */
}

.banner button:hover {
    background-color: #fff;
    color: #FD6602;
    border: 1px solid #FD6602;
}

/* Styling for fade-in and fade-out animations */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}



/* Styling for the key areas section */
.info-section {
    display: flex;
    flex-direction: row-reverse; /* Switches the order of children */
    justify-content: space-around;
    background: linear-gradient(120deg, #c43c79, #54147c);
    color: #fff;
    padding: 1.1em 1.5em;
    gap: 5.5em;
    margin-block-start: 50px;
    align-items: center; /* Center-align title vertically */
}

.info-title {
    flex: 1;
    max-inline-size: 20%; /* Ensure title doesn't take too much space */
    text-align: end; /* Align text to the right */
    margin-inline-end: 6.5em; /* Add space from the edge */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center title vertically */
}

.info-title h2 {
    font-size: 3.1em;
    color: #FD6602;
    margin-block-end: 0.5em;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.info-points {
    display: grid; /* Change to flex for better control */
    grid-template-columns: repeat(3, 1fr);
    flex: 0.6; /* Adjusts to the available space */
}

.icon {
    color: #FD6602;
    animation: bounce-sequential 8s linear infinite;
    font-size: 2.8em;
    margin-block-end: 0.5em;
}

.icon img {
    inline-size: 80px;
    block-size: 80px;
    object-fit: contain;
    color: #FD6602;
}

img {
    max-inline-size: 100%;
    block-size: auto;
    object-fit: contain;
    /* Prevents distortion */
}

.info-item:nth-child(1) .icon {
    animation-delay: 0s;
}

.info-item:nth-child(2) .icon {
    animation-delay: 2s;
}

.info-item:nth-child(3) .icon {
    animation-delay: 4s;
}

.info-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* Align content to the left */
    text-align: start;
    font-size: 0.8em;
    max-inline-size: 300px; /* Ensure narrower columns */
    max-block-size: 300px;
    border-radius: 10%;
    margin-inline-start: 4em; /* Adds left margin for alignment */
    box-shadow: 0 20px 12px rgba(0, 0, 0, 0.1);
}

/* Services section layout */
.services-section {
    padding: 4em 2em;
    background-color: #ffffff;
    color: #333;
}

.services-content {
    display: flex;
    justify-content: space-between;
    gap: 2em;
    align-items: flex-start;
}

.services-title {
    max-inline-size: 40%; /* Left column with title and description */
}

.services-title h2 {
    font-size: 3.0em;
    color: #FD6602;
    margin-block-end: 0.2em;
}

.services-title p {
    font-size: 1.12em;
    color: #333;
    line-height: 1.5;
}

/* Grid layout for services (right side) */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Smaller grid for compact display */
    gap: 3em;
    inline-size: 65%; /* Right column for the gallery */
}

/* Service item styling */
.service-item {
    perspective: 1000px;
    inline-size: 310px; /* Larger width */
    block-size: 310px; /* Larger height, keeps square shape */
}

.card {
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s;
    cursor: pointer;
}

/* Flip the card on click */
.service-item.clicked .card {
    transform: rotateY(180deg);
}

/* Card front styling */
.card-front,
.card-back {
    position: absolute;
    inline-size: 100%;
    block-size: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Front side with image */
.card-front img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

/* Overlay with title */
.card-front .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7em;
    opacity: 0;
    transition: opacity 0.3s;
}

.card-front:hover img {
    transform: scale(1.1);
}

.card-front:hover .overlay {
    opacity: 1;
}

/* Back side styling */
.card-back {
    background: #f0f0f0;
    color: #333;
    display: flex;
    align-items: start;
    justify-content: center;
    transform: rotateY(180deg);
    padding: 1em;
    font-size: 1.1em;
}

/* Spacer Section (Full-Width Banner) */
.spacer {
    background: linear-gradient(120deg, #54147c, #c43c79);
    text-align: center;
    padding: 30px 20px;
    color: white;
    inline-size: 100%; /* Makes the spacer full width */
    box-sizing: border-box; /* Ensures padding is included in the width */
}

.spacer h2 {
    margin-block-end: 20px;
    font-size: 2rem;
    color: white;
}

.spacer-button {
    background-color: white;
    color: #54147c;
    padding: 12px 24px;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    animation: pulse 1.5s infinite;
    transition: all 0.3s ease-in-out;
}

.spacer-button:hover {
    background-color: #54147c;
    color: white;
    border: 2px solid white;
}



.key-areas-section {
    text-align: center;
}

.key-areas-section h2 {
    font-size: 2.8em;
    margin-block-end: 0.3em;
    color: #FD6602;
}

.key-areas-section p {
    font-size: 1.1em;
    margin-block-end: 2em;
    text-align: center;
}

.key-areas-grid {
    display: flex;
    justify-content: center;
    gap: 15em;
    padding-block-end: 50px;
}

.service-itemTopics {
    perspective: 1000px;
    inline-size: 340px;
    /* Larger width */
    block-size: 330px;
    /* Larger height, keeps square shape */
}

.service-itemTopics p {
    text-align: start;
}

/* Flip the card on click */
.service-itemTopics.clicked .card {
    transform: rotateY(180deg);
}

.card.clicked {
    transform: rotateY(180deg);
}

.card-front img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.overlay {
    position: absolute;
    inset-block-end: 0;
    inline-size: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    text-align: center;
    padding: 0.5em;
    font-size: 1.2em;
}

.card-back {
    background: #f7f7f7;
    color: #333;
    transform: rotateY(180deg);
    padding: 1em;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 0 15px #C43C79,
        /* Glow during flip */
        0 0 30px #ffffff,
        0 0 45px rgba(196, 60, 121, 0.8);
    animation: glow-pulse 0.6s ease-in-out;
    /* Glow effect during flip */
}

/* Add subtle glow effect */
.card-back:hover {
    box-shadow: 0 0 10px #C43C79,
        /* Glow color */
        0 0 20px #C43C79,
        0 0 30px rgba(196, 60, 121, 0.8);
    /* Softer edges */
}

.why-instinctive-tech {
    display: flex;
    align-items: center;
    gap: 5em;
    background-color: #ffffff;
    flex-direction: row-reverse;
    /* Swap the order of the elements */
}

.text-content {
    flex: 1;
    max-inline-size: 60%;
}

.text-content h2 {
    font-size: 2.8em;
    margin-block-end: 0.5em;
    color: #FD6602;
}

.text-content p {
    font-size: 1.1em;
    line-height: 1.4;
    color: #666;
    max-inline-size: 85%;
}

.image-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    max-inline-size: 75%;
    margin-block-start: -70px;
    position: relative;
}

.image-content img {
    inline-size: 100%;
    max-inline-size: 700px;
    block-size: 550px;
    aspect-ratio: 1 / 1;
    /* Ensures image stays square */
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    /* Adds depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    object-fit: cover;
}

.image-content img:hover {
    transform: scale(1.05);
    /* Slightly enlarge on hover for depth effect */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
    /* Darker shadow on hover */
}


.culture {
    display: flex;
    flex-direction: column;
}

.culture .company-culture {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

.culture .company-culture h2 {
    text-align: center;
    font-size: 2.8rem;
    color: #FD6602;
    margin: 0;
}

.culture .company-culture p {
    text-align: start;
    font-size: 1.12rem;
    align-items: center;
    line-height: 1.58;
    color: #555;
    max-inline-size: 75%;
    margin: 0 auto;
}



/* General styling for the community section */
.community {
    display: flex;
    align-items: center;
    gap: 20px;
    /* Adds space between the image and text */
    margin: 40px 0;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    /* Initial state for fade-in */
    transform: translateY(20px);
    /* Initial position for animation */
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Text content styling */
.community .text-content {
    flex: 1;
    /* Allow the text to take up equal or more space */
    padding-inline-start: 50px;
    /*padding to move <p> from edge*/
}

.community .text-content h2 {
    font-size: 2.8rem;
    margin-block-end: 15px;
}

.community .text-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
}

/* Image content styling */
.community .community-image-content {
    flex: 1;
    /* Allow the image to take up equal space */
    text-align: center;
    /* Center the image horizontally */
}

.community .community-image-content img {
    max-inline-size: 90%;
    /* Ensure the image scales appropriately */
    max-block-size: 100%;
    block-size: auto;
    border-radius: 20px;
    /* Optional: Adds rounded corners to the image */
}

/* Fade-in effect */
.community.fade-in {
    opacity: 1;
    /* Fully visible */
    transform: translateY(0);
    /* Reset position */
}

/* Style for the quote section */
/* Base styling for the quote section */
.quote-section {
    text-align: center;
    padding: 40px;
    position: relative;
    overflow: hidden;
    padding-block-end: 1px;
}

.quote-container {
    display: inline-block;
    position: relative;
    text-align: center;
    padding-block-end: 60px;
}

.quote-line {
    font-family: 'Playwrite AU NSW', sans-serif;
    font-weight: 400;
    /* Use the bold weight for headings */
    font-size: 2.89rem;
    color: #333;
    opacity: 0;
    /* Hidden by default */
    position: relative;
    transform: translateX(0);
    /* Start position neutral */
    transition: transform 1s ease, opacity 1s ease;
}

.line-left {
    transform: translateX(-100%);
    /* Start off-screen to the left */
}

.line-right {
    transform: translateX(100%);
    /* Start off-screen to the right */
}

.quote-line.visible.line-left {
    transform: translateX(0);
    /* Animate into place */
    opacity: 1;
}

.quote-line.visible.line-right {
    transform: translateX(0);
    /* Animate into place */
    opacity: 1;
}

.author {
    font-size: 1.2rem;
    font-weight: bold;
    color: #555;
    margin-block-start: 20px;
    position: relative;
    z-index: 1;
}

.tech-topics {
    padding: 2em;
    background-color: #f9f9f9;
    overflow-x: hidden;
    /* Prevent scrollbars outside the container */
}

.tech-topics h2 {
    text-align: center;
    font-size: 2.3rem;
    margin-block-end: 1em;
}

.tech-topics h3 {
    color: #FD6602;
    text-align: center;
    padding-block-end: 15px;
    font-size: 1.2em;
}

.tech-topics p {
    text-align: start;
    font-size: 0.8em;
}

.topics-container {
    display: flex;
    gap: 3em;
    overflow-x: auto;
    /* Enable horizontal scrolling */
    padding: 0.5em;
    scroll-behavior: smooth;
    /* Smooth scrolling for user interaction */
}

.topic-item {
    flex: 0 0 auto;
    /* Ensure items don't shrink or grow */
    inline-size: 350px;
    /* Adjust card width */
    background: linear-gradient(135deg,
            #C43C79 5%,
            /* Dark purple in the corner */
            #ffffff 20%,
            /* Subtle pink blend */
            #ffffff 100%
            /* Dominant white */
        );
    /* Updated gradient background */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease;
    overflow: hidden;
    /* Contain the image and text */
    padding: 1em;
    /* Add padding around content */
    color: white;
    /* Text color for gradient background */
    block-size: 330px;
}

.topic-item:hover {
    transform: scale(1.05);
    /* Slightly enlarge on hover */
}

.topic-image {
    inline-size: 100%;
    block-size: 150px;
    /* Fixed height for consistent layout */
    object-fit: cover;
    border-radius: 5px 5px 0 0;
    /* Rounded corners for the top */
}

.topic-title {
    font-size: 1.8rem;
    /* Increased font size for title */
    font-weight: bold;
    color: #320b4f;
    /* Slightly darker purple for contrast */
    margin-block-start: 1em;
    /* Add spacing above the title */
    margin-block-end: 1em;
    /* Add spacing below the title */
}

.separator {
    block-size: 2px;
    /* Thickness of the separating line */
    background: white;
    /* Line color */
    margin: 1em 0;
    /* Space around the line */
    border-radius: 2px;
    /* Slightly rounded line */
}

.topic-description {
    font-size: 0.9rem;
    /* Slightly smaller font for description */
    color: #555;
    /* Neutral gray for readability */
    text-align: end;
    /* Align preview text to the right */
    line-height: 1.4;
    /* Improve readability */
    margin-block-start: 0.5em;
    margin-block-end: 1em;
    /* Add spacing below the description */
}


.topic-item a {
    text-decoration: none;
    color: inherit;
    display: block;
    padding: 0.5em;
    font-size: 0.9rem;
    color: #320b4f;
    /* Link color: Gold */
    font-weight: bold;
}


/* Popup Container */
.popup-container {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}


.popup-container.visible {
    visibility: visible;
    opacity: 1;
}

/* Popup Box */
.popup {
    background: linear-gradient(135deg,
            #C43C79 5%,
            /* Bright purple in the corner */
            #ffffff 20%,
            /* white */
            #ffffff 100%
            /* extra white for better fading*/
        );
    padding: 20px 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    max-inline-size: 500px;
    inline-size: 90%;
    /* Responsive width */
    text-align: center;
    position: relative;
}

/* Form Fields */
form input,
form textarea {
    inline-size: 100%;
    padding: 10px;
    margin-block-end: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 0.8rem;
}

/* Name Fields Side-by-Side */
.name-fields {
    display: flex;
    gap: 10px;
    padding: 10px;
}

.name-fields input {
    flex: 1;
}

/* Radio Button Options */
.radio-options {
    display: flex;
    flex-wrap: wrap; /* Wraps options for smaller screens */
    justify-content: space-between;
    margin-block-end: 15px;
    gap: 10px;
    padding: 10px;
}

.radio-options label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.radio-options input {
    margin-inline-end: 8px; /* Space between radio and label text */
}

/* Message Box */
form textarea {
    block-size: 150px;
    resize: none;
}

/* Buttons (Submit and Cancel) */
.buttons {
    display: flex;
    gap: 10px;
    margin-block-start: 5px;
}

.submit-btn,
.close-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}

/* Submit Button Styling */
.submit-btn {
    background-color: #54147c;
    color: #fff;
    margin-inline-start: 105px;
}

.submit-btn:hover {
    background: #c43c79;
}

/* Close Button in Top-Right Corner */
.close-btn {
    position: absolute;
    background: #54147c;
    inset-inline-start: 290px;
    border: none;
    font-size: 1rem;
    color: white;
    cursor: pointer;
}

.close-btn:hover {
    background-color: #c43c79;
    color: #fff;
}


/* Contact form styling */
/*THE FOOTER*/
#contact {
    padding-block-start: 20px;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    inline-size: 400px;
    block-size: 350px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1em;
}

#contact form {
    display: flex;
    flex-direction: column;
    gap: 1.1em;
    max-inline-size: 42px;
    margin: -10px auto;
}

.form-title {
    font-size: 1em;
}

#contact input,
#contact textarea {
    padding: 1em;
    border: none;
    border-radius: 25px;
    inline-size: 350px;
}

.form-msg textarea {
    block-size: 100px;
}

#contact button {
    padding: 0.7em;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 5px;
    inline-size: 65px;
    cursor: pointer;
    transition: background 0.3s;
    animation: pulse 1.5s infinite;
}

#contact button:hover {
    background: #7F00FF;
}

/* Footer styling */
footer {
    background: linear-gradient(120deg, #54147c, #c43c79);
    color: #fff;
    padding: 2em;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.footer-content {
    flex: 1;
    max-inline-size: 45%;
    text-align: center;
    margin-inline-end: 200px;
    margin-inline-start: 100px;
    padding-block-start: 25px;
    font-size: 1.1em;
}

.footer-content p {
    margin-block-end: 1em;
}

.social-media-icons {
    display: flex;
    gap: 1em;
    justify-content: center;
}

.social-media-icons a img {
    inline-size: 45px;
    block-size: 45px;
    transition: transform 0.3s;
}

.social-media-icons a img:hover {
    transform: scale(1.2);
}


/* Below section are all keyframes for organization*/
/* Pulse animation for the glow */
@keyframes glow-pulse {
    0% {
        box-shadow: 0 0 5px #C43C79, 0 0 10px #C43C79, 0 0 20px rgba(196, 60, 121, 0.6);
    }

    50% {
        box-shadow: 0 0 15px #C43C79, 0 0 30px #C43C79, 0 0 45px rgba(196, 60, 121, 0.8);
    }

    100% {
        box-shadow: 0 0 5px #C43C79, 0 0 10px #C43C79, 0 0 20px rgba(196, 60, 121, 0.6);
    }
}

/* Bounce animation keyframes */
@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

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

    60% {
        transform: translateY(-5px);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

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

/* Sequential Bounce Animation */
@keyframes bounce-sequential {

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

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

    /* Adjust height of the bounce */
}

/* Keyframe for flip animation */
@keyframes flip {
    0% {
        transform: rotateY(0);
    }

    100% {
        transform: rotateY(360deg);
    }
}

/* Fade-in animation */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Keyframes for line animations */
@keyframes lineFlowIn {
    from {
        opacity: 0;
        transform: translateX(var(--from, -100%));
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (min-width: 1025px) {
    nav {
        display: flex; /* Regular navigation for desktops */
    }

    .hamburger-menu {
        display: none; /* Hide hamburger */
    }
}

/* Responsive Adjustments */
@media (max-width: 1024px) {

    /* Header */
    header {
        padding: 1em;
        flex-direction: column;
        align-items: flex-start;
    }

    /* Navigation */
    nav {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 15px;
    }

    nav a {
        padding: 0.5em 1.5em;
        font-size: 1.1em;
        background-color: #C43C79;
        color: #fff;
        border-radius: 5px;
        text-decoration: none;
        transition: background 0.3s, color 0.3s;
    }

    nav a:hover {
        background-color: #fff;
        color: #FD6602;
    }

    /* Banner Section */
    .banner {
        block-size: 400px;
        padding: 1em;
        justify-content: center;
    }

    .banner h1 {
        font-size: 2em;
    }

    .banner p {
        font-size: 1em;
    }

    /* Key Areas Section */
    .info-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2em;
    }

    .info-points {
        grid-template-columns: 1fr 1fr;
        /* Reduce columns to two to prevent squishing */
        gap: 1em;
    }

    .info-item {
        max-inline-size: 90%;
    }

    /* Services Grid */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2em;
    }

    /* Community Section */
    .community {
        flex-direction: column;
    }

    /* Popup Form */
    .popup {
        max-inline-size: 80%;
        padding: 1em;
    }

    /* Forms */
    form input,
    form textarea {
        font-size: 1rem;
        padding: 8px;
    }

    /* Footer */
    footer {
        flex-direction: column;
        text-align: center;
    }

    .footer-content {
        margin: 0 auto;
        padding: 1em;
    }
}

@media (max-width: 768px){
    .hamburger-menu {
        display: block; /* Show hamburger on small screens */
        margin-block-start: -2px;
    }

    nav:not(.mobile-nav) {
        display: none; /* Hide the regular navigation */
    }
}

@media (min-width: 769px) and (max-width: 1024px) {

    /* Header */
    header {
        padding: 1em 0.5em;
        text-align: center;
    }


    /* Navigation */
    nav {
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    nav a {
        padding: 0.5em 1em;
        font-size: 1em;
        background-color: #C43C79;
        color: #fff;
        border-radius: 5px;
        text-decoration: none;
        transition: background 0.3s, color 0.3s;
    }

    nav a:hover {
        background-color: #fff;
        color: #FD6602;
    }

    .hamburger-menu {
        display: none; /* Hide hamburger menu */
    }

    /* Banner Section */
    .banner {
        block-size: 300px;
        justify-content: center;
    }

    .banner h1 {
        font-size: 1.8em;
    }

    .banner p {
        font-size: 0.9em;
    }

    /* Key Areas Section */
    .info-section {
        gap: 1.5em;
    }

    .info-item {
        padding: 1em;
    }

    /* Services Section */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.5em;
    }

    .service-item {
        inline-size: 100%;
    }

    /* Disable flipping animation on mobile */
    .service-item .card {
        transform: none !important;
        cursor: pointer;
    }

    /* Make the entire service item clickable */
    .service-item .card-front {
        pointer-events: auto;
    }

    .card-front:hover img {
        transform: none; /* Disable hover effect on mobile */
    }

    .card-front:hover .overlay {
        opacity: 1; /* Keep overlay visible for better interaction feedback */
    }

    /* Hide card-back entirely on mobile */
    .card-back {
        display: none;
    }

    /* Text Areas */
    .text-content,
    .info-title {
        max-inline-size: 100%;
        text-align: center;
    }

    /* Key Areas Grid */
    .key-areas-grid {
        flex-direction: column;
        gap: 1em;
        text-align: center;
    }

    /* Forms */
    form {
        padding: 1em;
    }

    form input,
    form textarea {
        font-size: 0.9rem;
        padding: 0.5em;
    }

    /* Footer Content */
    .footer-content {
        max-inline-size: 90%;
    }

    /* Logo */
    .logo {
        inline-size: 40px;
    }
}




/* Base Mobile Styling for Small Screens (max-inline-size: 480px) */
@media (max-width: 480px) {

    /* General Font Sizes */
    h1,h2,h3,h4,h5,h6 {
        font-size: 1.2em;
    }

    p,li,a {
        font-size: 0.8em;
    }

    /* Header Adjustments */
    header {
        padding: 0.5em;
        font-size: 0.8em;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .logo-container {
        inline-size: 30px;
        animation: flip 3s linear infinite;
    }

    nav {
        display: none;
    }


    /* Banner Section Adjustments */
    .banner {
        background-image: url('images/mobile-banner.jpg'); /* New background image for mobile */
        background-size: cover;
        background-position: center;
        block-size: 200px;
        padding: 1em;
        justify-content: center;
        margin-block-end: 40px; /* Maintain same space below the banner */
    }

    .banner h1 {
        font-size: 1.5em;
        margin-block-end: 0.5em;
    }

    .banner p {
        font-size: 0.8em;
        margin-block-end: 1em;
    }

    .banner button {
        font-size: 0.55em;
        padding: 0.5em;
        margin-inline-start: 0px; /* Maintain same horizontal space */
        margin-block-end: -20px; /* Maintain same space below the button */
    }

    /* Key Areas Section Adjustments */
    .info-section {
        margin-block-start: 20px; /* Maintain consistent space between sections */
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.5em;
        padding: 1em;
    }

    .info-title {
        max-inline-size: 100%;
        text-align: center;
    }

    .info-points {
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .info-item {
        max-inline-size: 90%;
        padding: 1em;
    }

    /* Services Section Adjustments */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.5em;
    }

    .service-item {
        inline-size: 100%;
    }

    /* Text Areas Adjustments */
    .text-content {
        max-inline-size: 100%;
        text-align: center;
    }

    /* Key Areas Grid Adjustments */
    .key-areas-grid {
        flex-direction: column;
        gap: 1em;
        text-align: center;
    }

    /* Community Section Adjustments */
    .community {
        flex-direction: column;
        gap: 1.5em;
        padding: 1em;
    }

    .community .text-content {
        padding-inline-start: 0;
    }

    .community .community-image-content img {
        max-inline-size: 100%;
        border-radius: 10px;
    }

    /* Popup Form Adjustments */
    .popup {
        max-inline-size: 90%;
        padding: 1em;
    }

    form input,
    form textarea {
        font-size: 0.9rem;
        padding: 0.5em;
    }

    /* Footer Adjustments */
    footer {
        padding: 1em;
        text-align: center;
    }

    .footer-content {
        max-inline-size: 100%;
        padding: 1em;
        font-size: 0.8em;
    }

    .social-media-icons a img {
        inline-size: 30px;
        block-size: 30px;
    }

    /* Button Adjustments */
    .spacer-button,
    .submit-btn {
        font-size: 0.7em;
        padding: 0.4em;
    }

    button {
        padding: 0.5em;
        font-size: 0.8em;
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    .services-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Three-column layout */
        gap: 1rem;
        padding: 1rem;
    }

    .service-item.enlarged {
        position: fixed;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        transform: translate(-50%, -50%) rotateY(180deg);
        inline-size: 80%; /* Slightly smaller for wider landscape mode */
        block-size: auto;
        z-index: 2000;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 0 15px #C43C79, 0 0 30px #fff, 0 0 45px rgba(196, 60, 121, 0.8);
    }
}

/* Medium-Sized Devices (max-inline-size: 768px) */
@media (max-width: 768px) and (orientation: portrait) {
    
    body{
        padding-block-start: 43px;
    }

    /* Dimming the background */
    body.dimmed::before {
        content: "";
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
        z-index: 1999; /* Below the focused image */
    }

    header {
        flex-direction: row;
        justify-content: space-between;
        background-color: #120C16;
    }

    nav {
        display: none;
    }

    .logo-container {
        order: 1;
        inline-size: 30px;
        animation: flip 3s linear infinite;
    }


    /* Banner Section Adjustments */
    .banner {
        background-image: url('images/mobile-banner.png'); /* New background image for tablets */
        inline-size: 100%;
        background-size: cover;
        justify-content: center;
        margin-block-start: 10px;
    }

    .banner h1 {
        font-size: 1.8em;
    }

    .banner p {
        font-size: 0.9em;
    }

    .banner button {
        font-size: 0.55em;
        margin-inline-start: 0px;
        margin-block-end: -20px;
    }

    /* Key Areas Section Adjustments */
    .info-section {
        margin-block-start: 50px; /* Maintain consistent space between sections */
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.5em; /* Space between the title and categories */
        padding: 1.5em 1em;
    }

    .info-title {
        font-size: 0.7em;
        margin-block-end: 1em;
        text-align: center;
        color: var(--primary-color);
        margin-inline-start: 70px;

    }

    .info-title h2 {
        font-size: 1.3em;
        color: var(--primary-color);
        margin-block-end: 0.3em;
        margin-block-start: -1.2rem;
    }

    .info-points {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; /* Three categories side by side */
        gap: 0.1em; /* Reduce gap between categories for mobile */
        justify-content: center;
        margin-inline-end: 35px;
        margin-block-start: -25px;
    }

    .info-item {
        max-inline-size: 100%;
        padding: 0.5em;
        text-align: start;
        font-size: 0.44rem; /* Smaller text size for mobile */
    }

    .icon {
        font-size: 0.78rem;
        margin-block-end: 0.3em;
    }

    .section-wrapper {
        background-color: #ffffff;
        padding: 20px 0;
    }

    /* Spacer Section (Full-Width Banner) */
.spacer h2 {
    background: linear-gradient(120deg, #54147c, #c43c79);
    text-align: center;
    padding: 30px 20px;
    color: white;
    inline-size: 100%; /* Makes the spacer full width */
    box-sizing: border-box; /* Ensures padding is included in the width */
}

    /* Services Section Adjustments */
    .services-section {
        padding: 2em 1em;
    }

    .services-title {
        max-inline-size: 100%;
        text-align: center;
        margin-block-end: 1em;
    }

    .services-title h2 {
        font-size: 1rem;
        color: #FD6602;
        text-align: start;
    }

    .services-title p {
        font-size: 0.48rem;
        text-align: start;
        margin-inline-end: 10px;
    }

    .services-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Two-column layout */
        gap: 1rem;
        padding: 1rem;
    }

    .service-item.enlarged {
        position: fixed;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        transform: translate(-50%, -50%) rotateY(180deg);
        inline-size: 90%;
        block-size: auto;
        z-index: 2000;
        box-shadow: 0 0 15px #C43C79, 0 0 30px #fff, 0 0 45px rgba(196, 60, 121, 0.8);
        background: #fff;
        border-radius: 10px;
    }

    /* Enlarged state for service items */
    .service-item.focused {
        position: fixed;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        transform: translate(-50%, -50%) scale(1.5); /* Enlarge and center */
        z-index: 2000;
        background: #fff;
        box-shadow: 0 0 15px #C43C79, 0 0 30px #fff, 0 0 45px rgba(196, 60, 121, 0.8);
        border-radius: 10px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .services-content {
        display: flex;
        justify-content: space-between;
        gap: 0.5em;
        align-items: flex-start;
    }


    .service-item {
        inline-size: 60px;
        block-size: 60px;
        position: relative; /* Original position */
        transform: none; /* Reset transform */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    /* Why Instinctive Tech Section Adjustments */
    .why-instinctive-tech {
        flex-direction: row-reverse;
        text-align: center;
        gap: 1.5em;
        padding-inline-start: 10px;
    }

    .text-content h2 {
        font-size: 1em;
        color: #FD6602;
        text-align: start;
    }

    .text-content p {
        font-size: 0.48rem;
        line-height: 1.05em;
        text-align: start;
    }

    .image-content {
        max-inline-size: 100%;
    }

    .image-content img {
        inline-size: 150px;
        block-size: 150px;
        aspect-ratio: 1 / 1;
        border-radius: 8px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .key-areas-section {
        text-align: center;
    }
    
    .key-areas-section h2 {
        font-size: 2.8em;
        margin-block-end: 0.3em;
        color: #FD6602;
    }
    
    .key-areas-section p {
        font-size: 1.1em;
        margin-block-end: 2em;
        text-align: center;
    }
    
    .key-areas-grid {
        display: flex;
        justify-content: center;
        gap: 15em;
        padding-block-end: 50px;
    }

    .culture {
        display: flex;
        flex-direction: column;
    }
    
    .culture .company-culture {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }
    
    .culture .company-culture h2 {
        text-align: center;
        font-size: 2.8rem;
        color: #FD6602;
        margin: 0;
    }
    
    .culture .company-culture p {
        text-align: start;
        font-size: 1.12rem;
        align-items: center;
        line-height: 1.58;
        color: #555;
        max-inline-size: 75%;
        margin: 0 auto;
    }
    
    
    
    /* General styling for the community section */
    .community {
        display: flex;
        align-items: center;
        gap: 20px;
        /* Adds space between the image and text */
        margin: 40px 0;
        padding: 20px;
        box-sizing: border-box;
        opacity: 0;
        /* Initial state for fade-in */
        transform: translateY(20px);
        /* Initial position for animation */
        transition: opacity 0.6s ease, transform 0.6s ease;
    }
    
    /* Text content styling */
    .community .text-content {
        flex: 1;
        /* Allow the text to take up equal or more space */
        padding-inline-start: 50px;
        /*padding to move <p> from edge*/
    }
    
    .community .text-content h2 {
        font-size: 2.8rem;
        margin-block-end: 15px;
    }
    
    .community .text-content p {
        font-size: 1.1rem;
        line-height: 1.6;
        color: #555;
    }
    
    /* Image content styling */
    .community .community-image-content {
        flex: 1;
        /* Allow the image to take up equal space */
        text-align: center;
        /* Center the image horizontally */
    }
    
    .community .community-image-content img {
        max-inline-size: 90%;
        /* Ensure the image scales appropriately */
        max-block-size: 100%;
        block-size: auto;
        border-radius: 20px;
        /* Optional: Adds rounded corners to the image */
    }
    
    /* Fade-in effect */
    .community.fade-in {
        opacity: 1;
        /* Fully visible */
        transform: translateY(0);
        /* Reset position */
    }
    
    /* Style for the quote section */
    /* Base styling for the quote section */
    .quote-section {
        text-align: center;
        padding: 40px;
        position: relative;
        overflow: hidden;
        padding-block-end: 1px;
    }
    
    .quote-container {
        display: inline-block;
        position: relative;
        text-align: center;
        padding-block-end: 60px;
    }
    
    .quote-line {
        font-family: 'Playwrite AU NSW', sans-serif;
        font-weight: 400;
        /* Use the bold weight for headings */
        font-size: 2.89rem;
        color: #333;
        opacity: 0;
        /* Hidden by default */
        position: relative;
        transform: translateX(0);
        /* Start position neutral */
        transition: transform 1s ease, opacity 1s ease;
    }
    
    .line-left {
        transform: translateX(-100%);
        /* Start off-screen to the left */
    }
    
    .line-right {
        transform: translateX(100%);
        /* Start off-screen to the right */
    }
    
    .quote-line.visible.line-left {
        transform: translateX(0);
        /* Animate into place */
        opacity: 1;
    }
    
    .quote-line.visible.line-right {
        transform: translateX(0);
        /* Animate into place */
        opacity: 1;
    }
    
    .author {
        font-size: 1.2rem;
        font-weight: bold;
        color: #555;
        margin-block-start: 20px;
        position: relative;
        z-index: 1;
    }
    
    .tech-topics {
        padding: 2em;
        background-color: #f9f9f9;
        overflow-x: hidden;
        /* Prevent scrollbars outside the container */
    }
    
    .tech-topics h2 {
        text-align: center;
        font-size: 2.3rem;
        margin-block-end: 1em;
    }
    
    .tech-topics h3 {
        color: #FD6602;
        text-align: center;
        padding-block-end: 15px;
        font-size: 1.2em;
    }
    
    .tech-topics p {
        text-align: start;
        font-size: 0.8em;
    }
    
    .topics-container {
        display: flex;
        gap: 3em;
        overflow-x: auto;
        /* Enable horizontal scrolling */
        padding: 0.5em;
        scroll-behavior: smooth;
        /* Smooth scrolling for user interaction */
    }
    
    .topic-item {
        flex: 0 0 auto;
        /* Ensure items don't shrink or grow */
        inline-size: 350px;
        /* Adjust card width */
        background: linear-gradient(135deg,
                #C43C79 5%,
                /* Dark purple in the corner */
                #ffffff 20%,
                /* Subtle pink blend */
                #ffffff 100%
                /* Dominant white */
            );
        /* Updated gradient background */
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        text-align: center;
        transition: transform 0.3s ease;
        overflow: hidden;
        /* Contain the image and text */
        padding: 1em;
        /* Add padding around content */
        color: white;
        /* Text color for gradient background */
        block-size: 330px;
    }
    
    .topic-item:hover {
        transform: scale(1.05);
        /* Slightly enlarge on hover */
    }
    
    .topic-image {
        inline-size: 100%;
        block-size: 150px;
        /* Fixed height for consistent layout */
        object-fit: cover;
        border-radius: 5px 5px 0 0;
        /* Rounded corners for the top */
    }
    
    .topic-title {
        font-size: 1.8rem;
        /* Increased font size for title */
        font-weight: bold;
        color: #320b4f;
        /* Slightly darker purple for contrast */
        margin-block-start: 1em;
        /* Add spacing above the title */
        margin-block-end: 1em;
        /* Add spacing below the title */
    }
    
    .separator {
        block-size: 2px;
        /* Thickness of the separating line */
        background: white;
        /* Line color */
        margin: 1em 0;
        /* Space around the line */
        border-radius: 2px;
        /* Slightly rounded line */
    }
    
    .topic-description {
        font-size: 0.9rem;
        /* Slightly smaller font for description */
        color: #555;
        /* Neutral gray for readability */
        text-align: end;
        /* Align preview text to the right */
        line-height: 1.4;
        /* Improve readability */
        margin-block-start: 0.5em;
        margin-block-end: 1em;
        /* Add spacing below the description */
    }
    
    
    .topic-item a {
        text-decoration: none;
        color: inherit;
        display: block;
        padding: 0.5em;
        font-size: 0.9rem;
        color: #320b4f;
        /* Link color: Gold */
        font-weight: bold;
    }
    
    
    /* Popup Container */
    .popup-container {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 1000;
    }
    
    
    .popup-container.visible {
        visibility: visible;
        opacity: 1;
    }
    
    /* Popup Box */
    .popup {
        background: linear-gradient(135deg,
                #C43C79 5%,
                /* Bright purple in the corner */
                #ffffff 20%,
                /* white */
                #ffffff 100%
                /* extra white for better fading*/
            );
        padding: 20px 30px;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        max-inline-size: 500px;
        inline-size: 90%;
        /* Responsive width */
        text-align: center;
        position: relative;
    }
    
    /* Form Fields */
    form input,
    form textarea {
        inline-size: 100%;
        padding: 10px;
        margin-block-end: 5px;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 0.8rem;
    }
    
    /* Name Fields Side-by-Side */
    .name-fields {
        display: flex;
        gap: 10px;
        padding: 10px;
    }
    
    .name-fields input {
        flex: 1;
    }
    
    /* Radio Button Options */
    .radio-options {
        display: flex;
        flex-wrap: wrap; /* Wraps options for smaller screens */
        justify-content: space-between;
        margin-block-end: 15px;
        gap: 10px;
        padding: 10px;
    }
    
    .radio-options label {
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    
    .radio-options input {
        margin-inline-end: 8px; /* Space between radio and label text */
    }
    
    /* Message Box */
    form textarea {
        block-size: 150px;
        resize: none;
    }
    
    /* Buttons (Submit and Cancel) */
    .buttons {
        display: flex;
        gap: 10px;
        margin-block-start: 5px;
    }
    
    .submit-btn,
    .close-btn {
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        font-size: 1rem;
        cursor: pointer;
        transition: background 0.3s ease, color 0.3s ease;
    }
    
    /* Submit Button Styling */
    .submit-btn {
        background-color: #54147c;
        color: #fff;
        margin-inline-start: 105px;
    }
    
    .submit-btn:hover {
        background: #c43c79;
    }
    
    /* Close Button in Top-Right Corner */
    .close-btn {
        position: absolute;
        background: #54147c;
        inset-inline-start: 290px;
        border: none;
        font-size: 1rem;
        color: white;
        cursor: pointer;
    }
    
    .close-btn:hover {
        background-color: #c43c79;
        color: #fff;
    }

    .culture .company-culture{
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 20px;
    }

    .culture .company-culture h2{
        text-align: center;
        font-size: 1em;
        color: var(--primary-color);
    }

    .culture .company-culture p {
        text-align: start;
        font-size: 0.5rem;
        line-height: 1.2;
        color: #555;
    }


    /* Community Section Adjustments */
    .community {
        flex-direction: column;
        gap: 1.5em;
        padding: 1em;
    }

    .community .text-content {
        padding-inline-start: 0;
    }

    .community .community-image-content img {
        max-inline-size: 100%;
        border-radius: 10px;
    }

    /* Footer Adjustments */
    footer {
        padding: 1em;
        text-align: center;
    }

    .footer-content {
        max-inline-size: 100%;
        padding: 1em;
        font-size: 0.8em;
    }

    .social-media-icons a img {
        inline-size: 30px;
        block-size: 30px;
    }

    /* Button Adjustments */
    .spacer-button,
    .submit-btn {
        font-size: 0.7em;
        padding: 0.4em;
    }

    button {
        padding: 0.5em;
        font-size: 0.8em;
    }
}