body {
        margin: 0;
        font-family: 'Plus Jakarta Sans', sans-serif;
        background: #FFFFFF;
    }
	.page-wrapper {
		width: 100%;
		margin: auto;
		background: #F9F7F5;
		padding: clamp(24px, 4vw, 40px) 0;
		padding-left: clamp(24px, 5vw, 61px);
	}

	.tag {
		background: #FCB73DD1;
		padding: clamp(4px, 0.8vw, 6px) clamp(8px, 1.5vw, 12px);
		border-radius: clamp(4px, 0.6vw, 5px);
		display: inline-block;
		margin-bottom: clamp(16px, 3vw, 31px);
		color: #FFF;
		text-align: center;
		font-family: Inter;
		font-size: clamp(14px, 2vw, 24px);
		font-weight: 600;
		line-height: clamp(21px, 3vw, 36px);
	}

	h1 {
		margin-bottom: clamp(20px, 4vw, 40px);
		max-width: clamp(500px, 70vw, 800px);
		color: #0B4C53;
		font-family: "Plus Jakarta Sans";
		font-size: clamp(26px, 4vw, 40px);
		font-weight: 600;
		line-height: clamp(1.2em, 3vw, 1.3em);
	}
    /* Hero Section */
	.hero {
		display: flex;
		background: #fff;
		padding-top: clamp(32px, 5vw, 60px);
		padding-bottom: clamp(32px, 5vw, 60px);
		padding-left: clamp(24px, 5vw, 61px);
		padding-right: clamp(24px, 5vw, 61px);
		border-radius: clamp(8px, 1vw, 10px);
		gap: clamp(16px, 3vw, 28.5px);
	}

	.hero .image-placeholder {
		width: clamp(280px, 40vw, 500px);
		height: clamp(240px, 35vw, 417px);
		border-radius: clamp(8px, 1vw, 10px);
	}

	.image-placeholder img {
		width: 100%;
		height: 100%;
		border-radius: clamp(8px, 1vw, 10px);
		object-fit: cover;
	}
   
	.hero-content {
		width: 60%;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.hero-content h2 {
		color: #2E9AB2;
		font-family: "Plus Jakarta Sans", sans-serif;
		font-size: clamp(26px, 4vw, 40px);
		font-weight: 800;
		margin-bottom: clamp(12px, 2vw, 20px);
		margin-left: clamp(2px, 0.3vw, 3.5px);
		margin-right: clamp(2px, 0.3vw, 3.5px);
		line-height: clamp(1.2em, 3vw, 1.3em);
	}

	.hero-content p {
		color: #828282;
		font-family: "Plus Jakarta Sans", sans-serif;
		font-size: clamp(16px, 2.5vw, 24px);
		font-weight: 400;
		margin: 0;
		line-height: clamp(1.25em, 3vw, 1.3em);
	}

	.hero-content span {
		font-family: "Plus Jakarta Sans", sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: clamp(14px, 2vw, 20px);
		line-height: clamp(1.2em, 3vw, 1.3em);
		letter-spacing: 0;
		vertical-align: middle;
		color: rgba(130, 130, 130, 1);
	}
    /* Grid */
	.grid { 
		display: grid; 
		grid-template-columns: repeat(auto-fill, minmax(301px, 1fr)); 
		gap: 47px; 
		padding-top: 60px; 
		padding-bottom: 60px; 
		padding-left: 60px; 
		padding-right: 60px; 
	}

	.card {
		background: #fff;
		border-radius: clamp(8px, 1vw, 10px);
		padding-bottom: clamp(10px, 1.5vw, 15px);
	}

	.card {
		transition: transform 0.4s ease; /* transition on default state */
	}

	.card:hover {
		transform: scale(1.05); /* zoom on hover */
	}

	.hero {
		transition: transform 0.4s ease; /* transition on default state */
	}

	.hero:hover {
		transform: scale(1.05); /* zoom on hover */
	}

	.card img {
		width: clamp(250px, 25vw, 381px);
		height: clamp(250px, 25vw, 380px);
		object-fit: cover;
		border-radius: clamp(15px, 2vw, 20px);
	}

	.card-type {
		margin-top: clamp(6px, 1vw, 10px);
		padding: 0 clamp(6px, 1vw, 10px);
		color: #828282;
		font-family: "Plus Jakarta Sans", sans-serif;
		font-size: clamp(12px, 1.5vw, 16px);
		font-style: normal;
		font-weight: 400;
		line-height: clamp(18px, 2.5vw, 24px);
		margin-bottom: clamp(12px, 2vw, 21px);
	}

	.card-title {
		padding: 0 clamp(6px, 1vw, 10px);
		margin-top: clamp(2px, 0.5vw, 4px);
		width: clamp(250px, 25vw, 381px);
		color: #2E9AB2;
		font-family: "Plus Jakarta Sans", sans-serif;
		font-size: clamp(20px, 2.5vw, 24px);
		font-style: normal;
		font-weight: 800;
		line-height: clamp(28px, 3vw, 38.4px);
	}
	
	a{
		text-decoration: none;
	}
	
@media (max-width: 768px) {
    .hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }

    .hero-content {
        width: 100%;
    }

    .grid {
        grid-template-columns: 1fr;
        padding: 20px 10px;
        gap: 20px;
    }

    h1 {
        font-size: clamp(22px, 6vw, 32px);
    }

    .card img {
        height: auto;
    }

    .hero-content h2 {
        font-size: clamp(22px, 5vw, 32px);
    }

    .hero-content p {
        font-size: clamp(14px, 3vw, 20px);
    }

    .tag {
        font-size: clamp(12px, 3vw, 18px);
        padding: clamp(3px, 2vw, 5px) clamp(6px, 2vw, 10px);
    }
}

/* Responsive Grid */
/* Responsive Grid: centered if fewer cards */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    justify-content: center; /* centers grid if fewer items than row */
    gap: clamp(16px, 3vw, 40px); /* responsive gap */
    padding: clamp(20px, 4vw, 60px); /* responsive padding */
}

/* Cards */
.card {
    background: #fff;
    border-radius: clamp(8px, 1vw, 10px);
    padding-bottom: clamp(10px, 1.5vw, 15px);
    transition: transform 0.4s ease;
    display: flex;
    flex-direction: column;
	    align-items: center; /* centers content */

}

.card:hover {
    transform: scale(1.05);
}

/* Card Image */
.card img {
    width: 100%;               /* matches card width */
    height: 280px;
    object-fit: cover;
    border-radius: clamp(15px, 2vw, 20px);
}

.card-type{
    align-items: left; /* centers content */
}

.card {
    width: 280px;              /* SINGLE source of truth */
    background: #fff;
    border-radius: clamp(8px, 1vw, 10px);
    padding-bottom: 15px;
    transition: transform 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* IMPORTANT */
}

.card-title {
    width: 100%;               /* SAME as image */
    padding: 0 10px;
    box-sizing: border-box;

    color: #2E9AB2;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 800;
    line-height: 1.3;
}