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

:root {
    --primary-green: #1F6B4F;
    --secondary-green: #2D8659;
    --light-gray: #F8F9FA;
    --medium-gray: #E8EAED;
    --text-dark: #1A202C;
    --text-light: #64748B;
    --text-lighter: #94A3B8;
    --white: #FFFFFF;
    --border-light: #E2E8F0;
}

html {
    scroll-behavior: smooth;
}
 /* Reset */
        *{box-sizing:border-box}
        html,body{height:100%}
        body{
            font-family: "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
            margin:0;
            color:var(--text-primary);
            background:var(--white);
            -webkit-font-smoothing:antialiased;
            -moz-osx-font-smoothing:grayscale;
            line-height:1.45;
        }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    background-color: var(--white);
    color: var(--text-dark);
    line-height: 1.6;
    min-height: 100vh;
}

/* Navigation */
nav {
    
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
   
    position: sticky;
    top: 0;
    z-index: 100;
  }

.logo {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--primary-green);
    text-decoration: none;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 40px;
}

nav a {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95em;
    transition: color 0.3s ease;
}

nav a:hover {
    color: var(--primary-green);
}

/* Header */
header {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
    color: white;
   
    text-align: center;
    position: relative;
}

header h1 {
    font-size: 3.5em;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

header p {
    font-size: 1.3em;
    opacity: 0.95;
    font-weight: 400;
    max-width: 600px;
    margin: 0 auto;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Sections */
.faq-section {
    margin-bottom: 80px;
    animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-title {
    font-size: 2em;
    color: var(--primary-green);
    margin-bottom: 40px;
    font-weight: 700;
    position: relative;
    padding-bottom: 20px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background: var(--primary-green);
    border-radius: 2px;
}

/* FAQ Items */
.faq-item {
    margin-bottom: 16px;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.faq-item:hover {
    border-color: var(--primary-green);
    box-shadow: 0 4px 12px rgba(31, 107, 79, 0.12);
}

.faq-question {
    padding: 24px;
    background: var(--white);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.05em;
    font-weight: 600;
    color: var(--text-dark);
    transition: all 0.3s ease;
    user-select: none;
}

.faq-question:hover {
    color: var(--primary-green);
}

.faq-question.active {
    color: var(--primary-green);
    background: var(--light-gray);
}

.faq-toggle {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-green);
    flex-shrink: 0;
    margin-left: 20px;
    transition: transform 0.3s ease;
    font-size: 1.5em;
    font-weight: 300;
}

.faq-item.active .faq-toggle {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background: var(--light-gray);
}

.faq-item.active .faq-answer {
    max-height: 2000px;
    padding: 24px;
}

.faq-answer-content {
    color: var(--text-light);
    font-size: 0.95em;
    line-height: 1.8;
}

.faq-answer-content ul {
    margin: 15px 0;
    padding-left: 20px;
    list-style: none;
}

.faq-answer-content li {
    margin-bottom: 10px;
    padding-left: 8px;
}

.faq-answer-content li::before {
    content: '✔ ';
    color: var(--primary-green);
    font-weight: 600;
    margin-right: 8px;
}

.faq-answer-content strong {
    color: var(--text-dark);
    font-weight: 600;
}

.note-box {
    background: linear-gradient(135deg, rgba(31, 107, 79, 0.08) 0%, rgba(45, 134, 89, 0.05) 100%);
    border-left: 4px solid var(--primary-green);
    padding: 16px;
    margin: 20px 0;
    border-radius: 8px;
    font-size: 0.95em;
    color: var(--text-dark);
}

/* Feature Grid */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin: 50px 0;
}

.feature-card {
    background: var(--light-gray);
    padding: 24px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid var(--border-light);
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary-green);
    box-shadow: 0 8px 16px rgba(31, 107, 79, 0.12);
}

.feature-icon {
    font-size: 2.5em;
    margin-bottom: 12px;
}

.feature-card h3 {
    color: var(--primary-green);
    margin-bottom: 8px;
    font-size: 1.1em;
}

.feature-card p {
    color: var(--text-light);
    font-size: 0.9em;
}

/* Back to Top */
.back-to-top {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--primary-green);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.3em;
    box-shadow: 0 4px 12px rgba(31, 107, 79, 0.3);
    transition: all 0.3s ease;
    z-index: 999;
    align-items: center;
    justify-content: center;
}

.back-to-top:hover {
    background: var(--primary-green);
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(31, 107, 79, 0.4);
}

.back-to-top.show {
    display: flex;
}

/* Breadcrumb */
.breadcrumb {
    background: linear-gradient(90deg, rgba(31, 107, 79, 0.12) 0%, rgba(45, 134, 89, 0.08) 100%);
    border-bottom: 1px solid var(--border-light);
    /*  height: 50px; */
    display: flex;
    align-items: center;
	padding-top:120px;
}

.breadcrumb .container {
   /* padding: 0 40px; */
    display: flex;
    align-items: center;
    height: 100%;
}

.breadcrumb h1 {
    font-size: 1.1em;
    color: var(--primary-green);
    font-weight: 600;
    /*margin: 0; */
    letter-spacing: -0.5px;
}


/* Responsive */
@media (max-width: 768px) {
    nav {
        padding: 15px 20px;
        flex-direction: column;
        gap: 15px;
    }

    nav ul {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

    header {
        padding: 50px 20px;
    }

    header h1 {
        font-size: 2.2em;
    }

    header p {
        font-size: 1.05em;
    }

    .container {
        padding: 0 20px;
    }

    .section-title {
        font-size: 1.5em;
        margin-bottom: 30px;
    }

    .faq-question {
        font-size: 0.95em;
        padding: 16px;
    }

    .back-to-top {
        bottom: 20px;
        right: 20px;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }
}
/*home */

 /* Brand tokens from user's spec */
        :root{
            --bga-green: #248A3D;
            --text-primary: #232C2E;
            --text-secondary: #3C3C43;
            --light-gray: #F2F2F2;
            --border-gray: #A8ADB4;
            --cta-pay: #FFA828;
            --white: #FFFFFF;
            --muted-gray: #5C6363;
            --danger: #E24955;
            --label-light: #D2EAD7;
            --tab-active: #C9ECD1;
            --tab-deact: #E3F1E6;
            --bg-gray: #E3E5E5;
        }

        /* Reset */
        *{box-sizing:border-box}
        html,body{height:100%}
        body{
            font-family: "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
            margin:0;
            color:var(--text-primary);
            background:var(--white);
            -webkit-font-smoothing:antialiased;
            -moz-osx-font-smoothing:grayscale;
            line-height:1.45;
        }

        a{color:var(--bga-green); text-decoration:none}
        img{max-width:100%; display:block}

        .container{max-width:1100px; margin:0 auto; padding:36px 20px;}

		/* --- HEADER STYLES (Fixed Top Nav) --- */
		.main-header{
			width: 100%;
			position: fixed; /* Fixed for stability */
			top: 0;
			left: 0;
			background: rgba(255, 255, 255, 0.7); /* Transparent over hero */
			z-index: 100;
			border: none;
			transition: background 0.3s;
		}

		/* Style for when the header scrolls off the hero */
		.main-header.scrolled {
			background: rgba(255, 255, 255, 0.7); 
			border-bottom: 1px solid rgba(255, 255, 255, 0.7);
		}

		.main-nav-inner {
			max-width: 1200px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10px;
		}

		.main-brand {
			display: flex;
			align-items: center;
		}

		.main-brand img {
			height: 100px;
			margin-right: 10px;
			border-radius: 8px;
			padding: 4px;
			width: auto;
			display: block;
		}

		.main-brand h1 {
			font-size: 28px;
			font-weight: 700;
			color: #18254F;
			margin: 0;
		}

		.main-nav {
			display: flex;
			gap: 25px;
			font-size: 22px;
		}

		.main-nav a {
			color: #18254F;
			text-decoration: none;
			font-weight: 500;
			font-family: "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
			transition: color 0.3s;
			
			position: relative;
			padding-bottom: 5px;
		}

		.main-nav a::after {
			content: '';
			position: absolute;
			width: 100%;
			height: 2px;
			bottom: 0;
			left: 0;
			background-color: var(--bga-green);
			transform: scaleX(0);
			transform-origin: bottom right;
			transition: transform 0.3s ease-out;
		}

		.main-nav a:hover {
			color: var(--bga-green);
		}
			
		.main-nav a:hover::after {
			transform: scaleX(1);
			transform-origin: bottom left;
		}

		/* --- NEW DOWNLOAD BUTTON STYLES (Including inner 2px border) --- */
		.btn-download-now {
			/* Layout and Spacing */
			display: inline-block;
			padding: 12px 20px;
			margin-left: 30px;
			
			/* Look and Feel */
			background-color: var(--bga-green); 
			color: #ffffff;
			text-decoration: none;
			font-size: 16px;
			font-weight: 700;
			text-transform: uppercase;
			border-radius: 8px;
			
			/* Multiple box-shadows: 
			   1. Outer drop shadow
			   2. Inner 2px border using the inset keyword and --border-gray variable
			*/
			box-shadow: 
				0 4px 6px rgba(0, 0, 0, 0.1), 
				inset 0 0 0 2px var(--border-gray);
			
			transition: background-color 0.3s, transform 0.1s, box-shadow 0.3s;
			font-family: "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
		}

		.btn-download-now:hover {
			background-color: var(--bga-green);
			transform: translateY(-1px);
			
			/* Optional: Change border color on hover for visual feedback */
			box-shadow: 
				0 4px 6px rgba(0, 0, 0, 0.1),
				inset 0 0 0 2px var(--bga-green, #218838);
		}

		.btn-download-now:active {
			transform: translateY(1px);
		}
/* --- END NEW DOWNLOAD BUTTON STYLES --- */
        
        /* Typography sizes by spec */
        h1{font-size:34px; font-weight:700; color:var(--text-primary); margin:0 0 12px; font-family: "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
} /* H1 */
        h2{font-size:28px; font-weight:700; color:var(--text-primary); margin:0 0 10px; font-family: "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
} /* H2 */
        h3{font-size:24px; font-weight:700; color:var(--text-primary); margin:0 0 10px; font-family: "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
} /* H3 */
        h4{font-size:20px; font-weight:700; margin:0 0 8px; font-family: "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
} /* H4 */
        h5{font-size:18px; font-weight:700; margin:0 0 6px; font-family: "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
} /* H5 */
        h6{font-size:16px; font-weight:500; margin:0; font-family: "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
} /* H6 */

        p.lead{font-size:16px; color:var(--text-secondary); margin:8px 0 18px; font-family: "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
} /* P1 */
        
        /* Hero */
        .hero-section{
			position:relative; 
			font-family: "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

		}
        .hero-section::before{
            content:"";
            position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5);
        }
        .hero-content{
            position:relative; z-index:2; max-width:1100px; margin:0 auto; display:flex; 
            align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0px; 
            padding:210px 20px 100px;
        }
        .hero-text-wrap{
            flex:1; min-width:300px; text-align:left; font-family: "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

        }
        .hero-heading{
            font-size:40px; color:var(--white); margin-bottom:12px; font-weight:700;
        }
        .hero-subheading{
            color:var(--white); opacity:0.9; margin-bottom:32px;
        }
        .app-badges-wrap{
            display:flex; flex-wrap:wrap; gap:15px;
        }
        .app-badges-wrap img{
            height:70px; width:auto;
        }
        .hero-logo-wrap{
            flex:1; max-width:280px; text-align:center;
        }
        .hero-logo-wrap img{
            width:280px; border-radius:20px; box-shadow:0 8px 25px rgba(255,255,255,0.2); 
            background:var(--white); padding:10px;
        }
        
        /* Sections */
        section{padding:44px 0; background:var(--white)}
        .section-sub{font-size:14px; color:var(--muted-gray); margin-top:8px; font-weight:500}

        /* --- FEATURE SECTION STYLING --- */
        .features-section{
             padding:100px 20px; background-color: var(--light-gray); 
             font-family: "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; color:var(--text-primary); text-align:center;
        }
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            max-width: 1100px;
            margin: 0 auto;
        }

        .feature-card {
            background: var(--white);
            padding: 20px;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(36, 138, 61, 0.08);
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(36, 138, 61, 0.25);
        }

        .feature-icon {
            width: 64px;
            height: 64px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px; 
            font-size: 40px; 
            color: var(--white);
            transition: all 0.3s ease;
        }
        .feature-card:hover .feature-icon { /* Restoring hover effect */
            transform: scale(1.1);
        }


        .feature-title {
            color: var(--text-primary);
            margin-bottom: 12px;
        }

        .feature-description {
            color: var(--text-secondary); 
            line-height: 1.6;
        }
        
        /* --- HOW SECTION STYLES --- */
		#how{
			font-family: "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; 
			padding:100px 20px; 
			background:var(--white); 
			color:var(--text-primary);
		}
		.how-steps .step-row {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 100px;
			align-items: center;
			direction: ltr !important; 
		}

		/* Styling for odd steps (Text Left, Image Right) - Steps 1, 3, 5 */
		.how-steps .step-row:nth-child(odd) .step-text {
			order: 1;
			padding-left: 100px;
		}
		.how-steps .step-row:nth-child(odd) .step-shot-wrap {
			order: 2;
			text-align: right;
			padding-right: 100px;
		}

		/* Styling for even steps (Image Left, Text Right) - Steps 2, 4, 6 */
		.how-steps .step-row:nth-child(even) .step-text {
			order: 2;
		}
		.how-steps .step-row:nth-child(even) .step-shot-wrap {
			order: 1;
			text-align: left;
			padding-left: 100px;
		}

		/* Image Wrapper (made relative for absolute positioning of slider elements) */
		.step-shot-wrap{
			display:inline-block; 
			overflow:hidden;
			/* CRITICAL: Added position: relative to contain the absolutely positioned slider buttons */
			position: relative; 
		}
		/* General image style - applied to images NOT inside the slider */
		.step-shot-wrap img{
			width: 250px; height: auto; border-radius:14px; box-shadow:0 8px 20px rgba(0,0,0,0.5); margin: 30px auto;
		}

		/* --- NEW STEP FLOW STYLES --- */

		/* Basic styling for the list container */
		.process-steps-list {
			list-style: none;
			padding-left: 0;
			margin: 0;
			/* Maintain the max-width you had on the original <p> */
			max-width: 350px; 
			text-align: left; 
			margin-left: 60px;
		}

		/* Style for each list item */
		.process-steps-list li {
			position: relative;
			padding-left: 20px;
			padding-bottom: 20px;
			line-height: 1.4;
			color: var(--text-secondary); 
		}

		.process-steps-list li:last-child {
			padding-bottom: 0;
		}

		/* ::before for the DOT (like node 1 or 2 in your image) */
		.process-steps-list li::before {
			content: '';
			position: absolute;
			top: 5px;
			left: 0px; 
			width: 8px;
			height: 8px;
			background-color: #248A3D; /* Green color for the dot */
			border-radius: 50%; /* Makes it a circle/dot */
		}

		/* ::after for the VERTICAL LINE (connecting the dots) */
		.process-steps-list li::after {
			content: '';
			position: absolute;
			top: 14px; /* Starts just below the dot */
			left: 3.5px; /* Center the line under the dot */
			bottom: 0;
			width: 1px; /* Line thickness */
			background-color: #248A3D; /* Green color for the line */
		}

		/* Hide the vertical line after the last dot */
		.process-steps-list li:last-child::after {
			display: none;
		}

		/* --- SLIDER CSS --- */
		.game-creation-slider {
			overflow: hidden; 
			position: relative; 
			margin: 30px auto;
			border-radius: 14px;
		}

		.slider-track {
			display: flex; 
			/* IMPORTANT: Updated transition for the 0.45s speed */
			transition: transform 0.5s ease-in-out; 
			width: calc(100% * var(--total-slides)); 
			margin-left: -5px; 
		}

		.slider-slide {
			width: calc(100% / var(--total-slides));
			flex-shrink: 0; 
			max-width: 100%;
			height: auto;
			margin-left: 5px; 
			border-radius: 0;
			box-shadow: none;
		}

		.slider-button {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			background: rgba(0, 0, 0, 0.6);
			color: white;
			border: none;
			padding: 8px 12px;
			cursor: pointer;
			font-size: 18px;
			z-index: 10;
			border-radius: 4px; 
			line-height: 1;
			opacity: 0.8;
		}

		.slider-button:hover {
			opacity: 1;
		}

		.slider-button.prev {
			left: 10px;
		}

		.slider-button.next {
			right: 10px;
		}
		/* General Step Styles (already OK) */
		.how-steps .step-text {
			text-align: left;
		}
		.step-badge {
			width:48px; 
			height:48px; 
			border-radius:12px; 
			background:var(--label-light); 
			display:flex; 
			align-items:center; 
			justify-content:center; 
			font-weight:700; 
			color:var(--bga-green); 
			font-size:24px; 
			border:2px solid rgba(36,138,61,0.08);
		}
		.step-title-wrap {
			display:flex; 
			align-items:center; 
			gap:12px; 
			margin-bottom:12px;
		}
		.step-text p {
			line-height:1.6; 
			margin-left: 60px;
			max-width: 350px;
		}
        /* WHO IT'S FOR section styles */
        .who-for-section{
            padding:100px 20px; background: var(--light-gray); font-family: "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; text-align:center;
        }
        .flip-card-container{
            width:280px; height:220px; perspective:1000px;
        }
        .flip-card{
            position:relative; width:100%; height:100%; transition:transform 0.8s; transform-style:preserve-3d; cursor:pointer;
        }
        .flip-card-front, .flip-card-back{
            position:absolute; width:100%; height:100%; backface-visibility:hidden; border-radius:16px; box-shadow:0 6px 16px rgba(0,0,0,0.1); display:flex; justify-content:center; align-items:center; padding:20px;
        }
        .flip-card-front{
            background:var(--bga-green); flex-direction:column;
        }
        .flip-card-front img{
            width:80px; margin-bottom:12px;
        }
        .flip-card-front h3{
            margin:0; color: var(--white);
        }
        .flip-card-back{
            background:var(--text-primary); color:var(--white); transform:rotateY(180deg);
        }
        .flip-card-back p{
			color: var(--white);
        }
        
        /* --- WHERE TO GET IT SECTION STYLES (Restored) --- */
		.get-it-section {
			padding: 100px 20px;
			background-color: var(--text-primary);
			color: var(--white);
			text-align: center;
			min-height: 50vh; /* Increased min-height for more vertical space and better centering */
			
			/* NEW: Vertical Centering using Flexbox */
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		.get-it-content {
			max-width: 800px;
			margin: 0 auto;
		}

		.get-it-content h1 {
			color: var(--white);
			margin-bottom: 50px;
			
		}

		.get-it-content h2 {
			color: var(--white);
			margin-bottom: 80px;
			
		}

		.get-it-badges {
			display: flex;
			justify-content: center;  
			gap: 20px;
		
		}
		.get-it-badges img {
			width: auto; 
			height: 100px; 
			cursor: pointer;
			transition: transform 0.2s;
		}
		.get-it-badges img:hover {
			transform: scale(1.05);
		}

		/* Added mobile responsiveness for better layout on small screens */
		@media (max-width: 600px) {
			.get-it-section {
				min-height: 60vh;
				padding: 50px 10px;
			}
			.get-it-content h1 {
				font-size: 32px;
				margin-bottom: 20px;
			}
			.get-it-content h6 {
				font-size: 18px;
				margin-bottom: 30px;
			}
			.get-it-badges {
				flex-direction: column;
				align-items: center;
			}
			.get-it-badges img {
				height: 80px; /* Reduce size slightly for mobile readability */
			}
		}
        
        /* Footer */
			footer{border-top:1px solid #EEE; background:var(--white)}

			/* Ensure the main container row uses 'space-between' to push content to the edges */
			.footer-container-row {
				font-size: 16px; /* Set base font size for the whole row */
			}

			/* 1. Logo Section (Aligned far left) */
			.main-brand {
				flex: 1; /* Allows it to occupy space for flex positioning */
				justify-content: flex-start;
				min-width: 150px; /* Ensure logo area has minimum space */
			}

			/* 2. Links Section (Centered) */
			.footer-links{
				display:flex; 
				gap:16px; 
				flex-wrap:wrap;
				justify-content: center; /* Center the links block */
				flex: 2; /* Give more flexibility to the center element to push sides out */
				min-width: 250px;
			}

			/* 3. Social Info Section (Single line, Aligned far right) */
			.social-info {
				display: flex;
				align-items: right;
				gap: 10px; /* Space between copyright and created by */
				flex: 1;
				justify-content: flex-end; /* Push content to the far right */
				white-space: nowrap; /* Forces the copyright and created by text onto one line */
				/*min-width: 300px;  Ensure content doesn't wrap too quickly */
			}

			/* Styling for all text and links */
			.footer-links a {
				color: var(--bga-green);
				text-decoration: none;
				transition: text-decoration 0.2s;
				font-size: 16px; 
			}
			.footer-links a:hover {
				text-decoration: underline; 
			}
			.social-info span, .social-info a {
				font-size: 16px; 
			}
			.social-info a {
				color: var(--bga-green) !important;
			}

        /* Responsive */
        @media (max-width:1150px){ /* Reduced padding for larger screens where steps break */
             .how-steps .step-row:nth-child(odd) .step-text,
             .how-steps .step-row:nth-child(odd) .step-shot-wrap {
                 padding-left: 50px;
                 padding-right: 50px;
             }
             .how-steps .step-row:nth-child(even) .step-shot-wrap {
                 padding-left: 50px;
             }
             .how-steps .step-row:nth-child(even) .step-text {
                 padding-right: 50px;
             }
        }
        @media (max-width:980px){
            .features{grid-template-columns:repeat(2,1fr)}
            .hero{padding:80px 0}
			.golf_logo{display: none;}
			
        }
		@media (min-width: 992px){   /* Desktop breakpoint */
			.hero-section{
				height: 760px;
			}
			.hero-heading {
				padding-bottom: 45px;
			}
			.hero-subheading {
				padding-bottom: 30px;
			}
		}
        @media (max-width:880px){ /* Breakpoint for steps to single column */
            .how-steps .step-row{
                grid-template-columns:1fr !important; 
                text-align:center;
                gap: 20px;
            }
            .how-steps .step-row .step-text{
                order: 1 !important; /* Text always second */
                padding-left: 20px !important;
                padding-right: 20px !important;
            }
            .how-steps .step-row .step-shot-wrap{
                order: 2 !important; /* Image always first */
                text-align:center !important;
                padding-left: 20px !important;
                padding-right: 20px !important;
            }
            .how-steps .step-row .step-shot-wrap img{margin: 20px auto !important;}
        }
        @media (max-width:560px){
            .main-nav {display: none;} /* Hide nav links on small screens */
            .hero-section { padding-top: 100px; }
            .hero-content{
				flex-direction: column;
				align-items: center;
				text-align: center;
				padding: 110px 20px 100px;
			}
            .main-brand img{height:70px;}
            .main-brand h1{font-size:18px;}
            .hero-logo-wrap{
				order: -1; /* image on top */
			}
            .hero-logo-wrap img{width:200px; margin: 0 auto;}
			 .hero-text-wrap{
				width:100%;
			}
			.footer_logo{justify-content: center;}
            .hero-heading{font-size: 30px;text-align: center;padding-top: 20px;}
            .hero-subheading{font-size: 18px;text-align: center;padding-top: 10px;}
            .features-grid { grid-template-columns: 1fr; }
            .get-it-badges img {height: 48px;}
			.app-badges-wrap{justify-content: center;}
			.social-info{
				flex-direction: column;   
				justify-content: center;
				align-items: center;      
				white-space: normal;     
				text-align: center;
				gap: 6px;
			}
			.btn-download-now{
				margin-left: 0px;
			}
			.step-row{margin-top: 70px;}
			
        }
		/* Hide hamburger by default */
		.mobile-menu-btn {
			font-size: 32px;
			cursor: pointer;
			display: none;
			padding: 5px 10px;
		}

		/* Mobile Nav (hidden initially) */
		.mobile-nav {
			display: none;
			flex-direction: column;
			background: #ffffff;
			padding: 20px;
			border-top: 1px solid #ddd;
		}

		.mobile-nav a {
			padding: 12px 0;
			font-size: 20px;
			color: #18254F;
			text-decoration: none;
		}

		/* Show mobile menu when active */
		.mobile-nav.show {
			display: flex;
		}

		/* MOBILE ONLY CSS */
		@media (max-width: 560px) {

			/* Hide desktop nav links */
			.main-nav {
				display: none;
			}

			/* Show hamburger */
			.mobile-menu-btn {
				display: flex;
				order: 2;
			}

			/* Keep logo + download button visible */
			.main-brand img {
				height: 62px;
			}

			.btn-download-now {
				font-size: 14px;
				padding: 10px 16px;
			}
		}