/*----------------VIRKFORSIDE---------------------*/

/* Global styles for the entire page */
body {
    overflow-x: hidden; /* Prevent horizontal scrolling of the entire page */
}


	/*----------------ZONE 1---------------------*/
	
	
.virk_forside_zone1 {
    grid-column: 1 / 27;
    grid-row: 6 / 8;
    display: grid;
    /* width: 100vw; Ensure it spans the entire viewport width */
    /*height: 100vh;  Ensure it spans the full viewport height */
    grid-template-rows: 85px auto 25px auto 20px auto 50px auto 20px auto 20px auto 20px auto 10px auto 20px auto 10px;
    grid-template-columns: 20px auto auto 20px auto auto 20px; 
    background: linear-gradient(to bottom, #E5DEFF, #FFFFFF); /* Add gradient background */

    /* Prevent overflow and align content properly */
    overflow: hidden;
    box-sizing: border-box;
	width: 100%;
	justify-content: center; /* Center grid content horizontally */
    align-content: center; /* Center grid content vertically (if needed) */
}
	
	
	
h1.Z1_heading {	
		grid-column: 1/-1;
		grid-row: 2/3;
		text-align: center;
		font-size: 2.25rem;
		width: 70%;
		color: #111827;
		/*text-shadow: 2px 2px 4px black;*/
		font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		margin: 0 auto;
		line-height: 105%;

	}

.Z1_manchet {	
		grid-column: 1/-1;
		grid-row: 4/5;
		text-align: center;
		font-size: 20px;
		font-weight: 400;
		width: 80%;
				margin: 0 auto;
		color: rgb(75, 85, 99, var(--tw-text-opacity));;
		/*text-shadow: 2px 2px 4px black;*/
		font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}	


a.skyblue_knap {
	grid-column: 1/-1;
	grid-row: 6/7;
background-color: #3c3c3c;
        color: #ffffff;
        font-size: 1rem;
        font-weight: 500;
        padding: 12px 20px;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        width: 70%;
        margin: 0 auto;
		text-align:center;
}

	
a.skyblue_knap:hover{
        background: rgb(29, 78, 216);
		color: white;
    }	
	


a.White_knap {
	grid-column: 1/-1;
	grid-row: 8/9;
    justify-self: center; /* Center horizontally in the grid */
    align-self: center;   /* Center vertically in the grid */
    background: #2563EB;
    border-radius: 4px;
    text-align: center;
    color: #ECF0F1;
    font-size: 24px;
    padding: 14px 0px 14px 0px;
	width: 100%;
	display: none;
    }
	
a.White_knap:hover{

        background: #ECF0F1;
		color: #003A6B;
    }	
	

	
	
	
	/*----------------ZONE 2---------------------*/
	

.Zone2main_old {
    grid-column: 1 / 27;
    grid-row: 8 / 9;
    display: grid;
    grid-template-columns: 20px auto auto 20px auto 20px auto auto 20px;
    grid-template-rows: 100px auto 40px auto auto auto auto auto 70px;
    background-color: #CACACA;
    position: relative; /* Make the container a positioning context */
    min-height: 40vh;
    z-index: 1; /* Ensure text and elements are above the background */
}

.Zone2main_old::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://vietassist.com/globalpic/frontpage_newsletter_photo.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    filter: brightness(50%); /* Lower the brightness of the background photo */
    z-index: -1; /* Place the pseudo-element behind the content */
}


/*----------------ZONE 2 new---------------------*/

.Zone2main {
		grid-column: 1/27; 
		grid-row: 10/11; 
		background-color: #E8E8E8;; 
        display: grid;
        grid-template-rows: 5px auto 40px auto auto auto 70px;
		grid-template-columns: auto 50px minmax(150px, 250px) minmax(20px, 40px) minmax(150px, 250px) minmax(20px, 40px) minmax(150px, 250px) 50px auto;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
display:none;
}

.zone2_container {
	grid-column: 1/-1;
	grid-row: 8;
  margin: 0 auto;
  width: 80%;
  padding: 20px;
  background-color: #fff;
 font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 border-radius: 16px;
}

/* Card Styles */
.zone2_card {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
 font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

h1.zone2_title {
	font-size: 1.5rem;
    line-height: 2rem;
	--tw-text-opacity: 1;
    color: rgb(64 62 67 / var(--tw-text-opacity));
	font-weight: 600;
	margin-bottom: 1.5rem;
	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

h2.self-service-title {
	font-size: 1.25rem;
    line-height: 1.75rem;
	font-weight: 600;
	margin-bottom: .75rem;
	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
	
.self-service-subtext {
	font-size: 1rem;
    line-height: 1.5rem;
	font-weight: 700;
	--tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity));
	margin-bottom: 1rem;
}

.self-service {
  background-color: #f2fce280;
border: 0.5px solid #ccc;
 font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.self-service-bullets {
	font-size: 1rem;
    line-height: 1.5rem;
	--tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity));
	
 font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 list-style: none;
}

.managed-service-bullets {
	font-size: 1rem;
    line-height: 1.5rem;
	--tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity));
	
 font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 list-style: none;
  padding-left: 0 !important; /* Add this line */
}



h2.managed-service-title {
	font-size: 1.25rem;
    line-height: 1.75rem;
	font-weight: 600;
	margin-bottom: .75rem;
	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.managed-service-subtext1 {
	font-size: 1rem;
	margin-left: 1rem;
	font-weight: 700;
    line-height: 1.5rem;
	--tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity));
	
 font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 margin-bottom: 20px;
}

.managed-service-subtext2 {
	font-size: 1rem;
	margin-left: 1rem;
	font-weight: 400;
    line-height: 1.5rem;
	--tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity));
	
 font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 margin-bottom: 30px;
}

.managed-service {
border: 0.5px solid #ccc;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Button Container Styles */
.zone2_buttons {
  display: flex;
  justify-content: center; /* Centers the buttons horizontally */
  align-items: center; /* Ensures proper vertical alignment */
  gap: 10px;
  flex-wrap: wrap; /* Allows buttons to stack on smaller screens */
  margin-top: 20px;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* General Button Styles */
.zone2_btn {
  padding: 10px 15px;
  font-size: 1rem;
  font-weight: 500;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-align: center; /* Ensures proper text alignment */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  min-width: 100px; /* Ensures consistent button width */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow for depth */
}

.zone2_btn2 {
	background-color: #333;
  color: #fff;
  padding: 10px 15px;
  font-size: 1rem;
  font-weight: 500;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-align: center; /* Ensures proper text alignment */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  min-width: 100px; /* Ensures consistent button width */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow for depth */

}

.zone2_btn2:hover {
  background-color: #555;
}


/* Primary Button Styles */
.zone2_btn.primary {
  background-color: #333;
  color: #fff;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  width: 200px; /* Ensures the primary button stands out */
}

.zone2_btn.primary:hover {
  background-color: #555;
}

/* Secondary Button Styles */
.zone2_btn.secondary {
  background-color: #fff;
  border: 1px solid #ccc;
  color: #333;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  width: 200px; /* Sets a fixed width for smaller secondary buttons */
}

.zone2_btn.secondary:hover {
  border-color: #999;
}


/*----------------ZONE 2 old---------------------*/


h1.help_overskrift {
		grid-column: 2/9;
        grid-row: 2/3;
        text-align: center;
        font-size: 35px;
        color: #fff;
        text-shadow: 2px 2px 4px black;
		font-family: DM Serif Display, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

.help_dropdown_category {
	    grid-column: 2/9;
        grid-row: 4/5;
}

.help_dropdown_skill {
	    grid-column: 2/9;
        grid-row: 5/6;
}

.help_dropdown_type {
	    grid-column: 2/9;
        grid-row: 6/7;
}

.help_newsletter_signup {
	grid-column: 2/9; 
	grid-row: 7/8;
	}

.Z2button
{
	grid-column: 2/9;
	grid-row: 8/9;
	background-color: #fff;
	border-radius: 2px;	
	border: 2px solid #ff9c00;
	text-align:center;
	color:#000;
	font-size:24px;
	text-align:center;
	text-decoration:none;
	padding-top: 10px;
	}



	/*----------------ZONE 3 4Kolonner ---------------------*/
/*
.virk_forside_zone3 {
		grid-column: 1/27; 
		grid-row: 9/10; 
		background-color: #CACACA; 
        display: grid;
        grid-template-rows: 80px auto 40px auto auto auto 70px;
		grid-template-columns: auto 20px minmax(150px, 250px) minmax(20px, 40px) minmax(150px, 250px) minmax(20px, 40px) minmax(150px, 250px) minmax(20px, 40px) minmax(150px, 250px) 20px auto;
	}

h1.Z3_heading{
		grid-column: 3/10; 
		grid-row: 2/3;	
		font-size: 32px;
		color: #111;
		text-align: center;
		font-family: DM Serif Display, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}



h2.Z3_SubHeading {
		font-size: 18px;
		color: #111;
		text-align: center;
		font-family: DM Serif Display, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

.Z3_video{
		width: 100%; 
		height: auto;
		border-radius: 10px;
	}

.Z3_text {
		margin-top: 10px;
		font-size: 14px;
		color: #111;
		font-family: DM Serif Display, sans-serif;		
}


h2.Z3_V1_SubHeading {
		grid-column: 3/4; 
		grid-row: 4/5;		
}

.Z3_video1{
		grid-row: 5/6;
		grid-column: 3/4; 
	}
	
.Z3_V1_text {
		grid-column: 3/4; 
		grid-row: 6/7;	
}


h2.Z3_V2_SubHeading {
		grid-column: 5/6; 
		grid-row: 4/5;	
}

.Z3_video2{
		grid-row: 5/6;
		grid-column: 5/6; 
	}
	
.Z3_V2_text {
		grid-column: 5/6; 
		grid-row: 6/7;	
}	






h2.Z3_V3_SubHeading {
		grid-column: 7/8; 
		grid-row: 4/5;	
}

.Z3_video3{
		grid-row: 5/6;
		grid-column: 7/8; 
	}

.Z3_V3_text {
		grid-column: 7/8; 
		grid-row: 6/7;	
}



h2.Z3_V4_SubHeading {
		grid-column: 9/10; 
		grid-row: 4/5;	
}

.Z3_video4{
		grid-row: 5/6;
		grid-column: 9/10; 
	}

.Z3_V4_text {
		grid-column: 9/10; 
		grid-row: 6/7;	
}

*/


	/*----------------ZONE 3 3Kolonner ---------------------*/

/* For Desktop (Grid Layout) */
/* For Desktop (Grid Layout) */
.virk_forside_zone3 {
    grid-column: 1 / -1;
    grid-row: 14 / 15;
    display: grid; /* Use grid layout */
    grid-template-rows: 120px 80px auto 70px; /* Header, manchette, videos, footer */
    grid-template-columns: 20px auto 20px; /* Center content with padding on sides */
    place-items: center; /* Center content within grid cells */
    padding: 10px;
    box-sizing: border-box;
    margin: 0 auto;
    width: 100%;
    position: relative;
    overflow-x: hidden; /* Prevent unintended horizontal scrolling */
}

h1.Z3_heading {
    grid-column: 1 / -1;
    grid-row: 10; /* Place in the first row */
    font-size: 20px;
    color: #fff; /* White text for better contrast inside the blue box */
    text-align: center;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Blue box styling */
    background-color: rgb(37, 99, 235); /* Blue background */
    padding: 5px 10px; /* Adjust padding as needed */
    border-radius: 6px; /* Soft corners */
    display: inline-block; /* Prevents it from stretching to the row height */
    align-self: center; /* Aligns the heading vertically in the row */
    justify-self: center; /* Aligns the heading horizontally in the row */
}

.Talent_manchet {
    grid-column: 1 / -1;
    grid-row: 12 / 13; /* Place in the second row */
    font-size: 32px;
    font-weight: bold;
    color: #111;
    text-align: center;
	width: 80%;
	margin: 0 auto; 
}

/* General styling for the video wrapper */
.Z3_video_wrapper {
    grid-column: 2 / 3;
    grid-row: 3 / 4; /* Place videos in the third row */
    display: flex;
    flex-direction: column; /* Stack content vertically within each wrapper */
    align-items: center;
    justify-content: center;
    width: 100%;
    scroll-snap-align: start;
    margin: 0 auto;
}

/* For Mobile (Flexbox Layout with Swipe) */
@media (max-width: 768px) {
    .virk_forside_zone3 {
        display: flex; /* Use flex layout for swiping */
        flex-direction: row; /* Align items horizontally for swipe functionality */
        overflow-x: auto; /* Enable horizontal scrolling */
        scroll-snap-type: x mandatory; /* Snap scrolling for smoother swiping */
        padding: 10px;
        box-sizing: border-box;
        gap: 10px; /* Add spacing between swipe items */
    }


    .Z3_video_wrapper {
        flex: 0 0 90%; /* Each wrapper takes 90% of the viewport width */
        scroll-snap-align: center; /* Center the videos during swiping */
        margin: 0 auto;
        max-width: 600px; /* Limit the video container width */
    }

    .Z3_video1, .Z3_video2, .Z3_video3 {
        width: 100%;
        max-width: 600px;
        height: auto;
        border-radius: 16px;
        object-fit: cover;
    }
}

.Z3_V1_text {
		grid-column: 9/10; 
		grid-row: 6/7;	
		display:none;

}
.Z3_V2_text {
		grid-column: 9/10; 
		grid-row: 6/7;	
		display:none;

}
.Z3_V3_text {
		grid-column: 9/10; 
		grid-row: 6/7;	
		display:none;

}

h2.Z3_V1_SubHeading {
		grid-column: 3/4; 
		grid-row: 5/6;	
				display: none; 
}

h2.Z3_V2_SubHeading {
		grid-column: 3/4; 
		grid-row: 5/6;	
				display: none; 
}

h2.Z3_V3_SubHeading {
		grid-column: 3/4; 
		grid-row: 5/6;	
				display: none; 
}



h2.Z3_V4_SubHeading {
		grid-column: 9/10; 
		grid-row: 4/5;	
		display:none;

}

.Z3_video4{
		grid-row: 5/6;
		grid-column: 9/10; 

	}

.Z3_V4_text {
		grid-column: 9/10; 
		grid-row: 6/7;	
		display:none;

}




	/*----------------ZONE 4---------------------*/




.virk_forside_zone4 {
		grid-column: 1/27; 
    grid-row: 12 / 14;
    background-color: rgb(37, 99, 235);
    display: grid;
    grid-template-rows: 60px auto 30px auto 40px auto auto 60px auto 60px;
    grid-template-columns: 20px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 20px;
    /*justify-items: center;
    align-items: center;*/
	}
	

	
h3.Z4_Heading {
	grid-column: 2/10; 
	grid-row: 2/3;
    font-size: 32px;
    color: #eee;
	width: 100%;
    text-align: center; /* Center text horizontally */
    margin: 0 auto 20px; /* Center element and add bottom margin */
	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    justify-self: center; /* Align item in the center horizontally within its grid area */
    align-self: center; /* Align item in the center vertically within its grid area */
}
	
.Z4_Manchet{
    grid-column: 3/9; /* Span the heading across the entire grid width */
    grid-row: 4/5; /* Stay in the desired grid row */
	text-align: center;
	font-size: 20px;
	color: #eee;
	/*text-shadow: 2px 2px 4px black;*/
	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}


.Z4_box1grid
{
		grid-column: 2/10; 
		grid-row: 6/7;
		color: #eee;
		display: grid;
			grid-template-rows: auto auto;
			grid-template-columns: 50px auto;
		margin-top: 0px;
		position: center;
	}
	
.Z4_box2grid
{
		grid-column: 2/10; 
		grid-row: 7/8;
		color: #eee;
		display: grid;
			grid-template-rows: auto auto;
			grid-template-columns: 50px auto;
		margin-top: 30px;
		position: center;
	}

.Z4-checkmark1 {
		grid-column: 1/2; 
		grid-row: 1/2;
	}

.Z4-checkmark2 {
		grid-column: 1/2; 
		grid-row: 2/3;
		margin-top: 30px;
	}

.Z4_boxtext1 {
		grid-column: 2/3; 
		grid-row: 1/2;
	}
	
h4
 {
		margin:0px 0px 8px 0px;
		font-size:18px;
	}

.Z4_boxtext2 {
		grid-column: 2/3; 
		grid-row: 2/3;
		margin-top:30px;
	}




a.request_button_bottom {
	grid-column: 2/10;
    grid-row: 9/10;
	width: 100%;
	color: #003A6B;
    background: white;
    justify-self: center; /* Center horizontally in the grid */
    align-self: center;   /* Center vertically in the grid */
    border-radius: 4px;
    text-align: center;
    font-size: 24px;
	font-weight: 500;
    padding:14px 0px 14px 0px;
	margin:0px;
    display: block; /* Ensures the element behaves like a block for proper alignment */
    box-sizing: border-box; /* Include padding and borders in total width calculation */
	border: 2px solid rgba(209, 213, 219, 0.8);
}

a.request_button_bottom:hover {
  color: rgb(255, 255, 255); /* Change text color to white on hover */
  background-color: rgb(37, 99, 235); /* Change background to blue on hover */
  border-color: rgb(255, 255, 255); /* Change border color to blue on hover */

  
}
	
.Z4_text1
{
		grid-column: 3/6; 
		grid-row: 6/7;
		font-size: 25px;
		color: #eee;
		text-align: left;
		margin-bottom: 20px;
		font-family: DM Serif Display, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	
.Z4_text2
{
		grid-column: 3/6; 
		grid-row: 7/8;
		font-size: 16px;
		color: #eee;
		text-align: left;
		font-family: DM Serif Display, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	






/* Styling til listen */
.Z4-bullets {
    list-style: none; /* Fjern standard bullets */
    padding: 0;
    margin: 0;
}

.Z4-bullets li {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Reduceret afstand mellem punkter */
    font-size: 25px;
    position: relative; /* Sikrer kontrol over ::before */
}

/* Flerfarvede bullets */
.Z4-bullets li::before {
    content: ''; /* Fjern tekstbaseret bullet */
    display: inline-block;
    width: 12px; /* Ensartet bredde */
    height: 12px; /* Ensartet højde */
    margin-right: 12px; /* Afstand mellem bullet og tekst */
    background: linear-gradient(45deg, #008F8C, #008F8C, #008F8C);
    border-radius: 50%; /* Gør bullet rund */
    flex-shrink: 0; /* Forhindrer størrelsesændring */
}




	/*----------------ZONE 5---------------------*/



.virk_forside_zone5 {
		grid-column: 1/27; 
		grid-row: 11/12; 
    background: linear-gradient(to bottom, #E5DEFF, #FFFFFF); /* Add gradient background */
        display: grid;
        grid-template-rows: 50px auto 20px auto 20px;
        grid-template-columns:auto auto auto auto auto auto auto auto;
	}
	
	
h3.Z5_Heading {
		grid-column: 1/-1; 
		grid-row: 2/3;
		font-size: 45px;
		color: #000;
		text-align: left;
		margin-bottom:10px;
		font-family: DM Serif Display, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		width: 90%;
		margin: 0 auto;
	}

.Z5_minigrid {
	grid-column: 1/-1; 
	grid-row: 4/5; 
	display: grid;
	grid-template-rows: auto 10px auto 10px auto 10px auto 10px;
    grid-template-columns: auto;
	width: 90%;
	height: 100%;
	margin: 0 auto;
}

.Z5_card1 {
	grid-row: 1;
}	
	
.Z5_card2 {
	grid-row: 3;
}		

.Z5_card3 {
	grid-row: 5;
}	

.Z5_card4 {
	grid-row: 7;
}	
	

/* Shared card styling */
.Z5_card1, .Z5_card2, .Z5_card3, .Z5_card4 {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
    margin: 0 auto; /* Center cards horizontally */
    padding: 15px; /* Add padding for consistent spacing */
}

/* Image styling for all cards */
.card1_image img, .card2_image img, .card3_image img, .card4_image img {
    width: 100%;
    height: auto;
}

/* Content styling for all cards */
.card1_content, .card2_content, .card3_content, .card4_content {
    padding: 1rem;
}

.card1_content h2, .card2_content h2, .card3_content h2, .card4_content h2 {
    font-size: 1rem; /* Adjust font size for smaller screens */
    font-weight: bold;
    color: #000;
    margin: 0.5rem 0;
}

.card1_content p, .card2_content p, .card3_content p, .card4_content p {
    font-size: 0.875rem; /* Slightly smaller font size for better fit */
    color: #6b7280;
    margin: 0.5rem 0;
}

.card1_content h3, .card2_content h3, .card3_content h3, .card4_content h3 {
    font-size: 1.25rem; /* Adjust salary font size */
    color: #1e40af;
    margin: 0.5rem 0;
}

.card1_content .savings, .card2_content .savings, .card3_content .savings, .card4_content .savings {
    font-size: 1rem;
    color: #059669;
    font-weight: bold;
    margin: 0.5rem 0;
}


/* Z6 */

.virk_forside_zone6 {
    grid-column: 1 / 27;
		grid-row: 10/11; 
    background-color: #e5deff33;
    display: grid;
    grid-template-rows: 50px auto 30px auto auto auto auto auto auto auto 40px;
    grid-template-columns: auto 30px 20px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 20px 30px auto;
    /*justify-items: center;
    align-items: center;*/
	}



/* General styles for the testimonial section */

.Z6_Heading {
        grid-column: 1 / -1;
        grid-row: 2 / 3;
        font-size: 35px;
        color: rgb(64 62 67 / var(--tw-text-opacity));
        text-align: center;
        margin: 0 auto;
        font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        display: flex;
        align-items: center;
        justify-content: center;
}

/* Container for testimonials */
.Z6_testimonial_container {
	grid-column: 1 / -1;
    grid-row: 4 / 5;    
	
	display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

/* Individual testimonial card */
.testimonial-card1 {
	grid-column: 1 / 2;
    grid-row: 3 / 4;
	display: flex;
	flex-direction: column; 
    background-color: transparent; /* Can be set as needed */
    border: 1px solid hsl(214.3, 31.8%, 91.4%); /* Light gray */
    border-radius: 10px;
    padding: 1.5rem; /* 24px */
    width: 90%;
    text-align: center;
	justify-content: center;
	align-items: center;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Subtle shadow */
    color: hsl(222.2, 84%, 4.9%); /* Dark navy text color */
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    box-sizing: border-box;
}

.testimonial-card2 {
	grid-column: 3 / 4;
    grid-row: 3 / 4;
	display: flex;
	flex-direction: column; 
    background-color: transparent; /* Can be set as needed */
    border: 1px solid hsl(214.3, 31.8%, 91.4%); /* Light gray */
    border-radius: 10px;
    padding: 1.5rem; /* 24px */
    width: 90%;
    text-align: center;
	justify-content: center;
	align-items: center;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Subtle shadow */
    color: hsl(222.2, 84%, 4.9%); /* Dark navy text color */
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    box-sizing: border-box;
}


.testimonial-card3 {
	grid-column: 3 / 4;
    grid-row: 4 / 5;
	display: flex;
	flex-direction: column; 
    background-color: transparent; /* Can be set as needed */
    border: 1px solid hsl(214.3, 31.8%, 91.4%); /* Light gray */
    border-radius: 10px;
    padding: 1.5rem; /* 24px */
    width: 90%;
    text-align: center;
	justify-content: center;
	align-items: center;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Subtle shadow */
    color: hsl(222.2, 84%, 4.9%); /* Dark navy text color */
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    box-sizing: border-box;
	display: none;

}

/* Testimonial quote styles */
.testimonial-quote {
    font-size: 1rem;
    color: rgb(75 85 99 / var(--tw-text-opacity));
    margin-bottom: 20px;
    position: relative;
    line-height: 1.5;
	font-style: italic;
}

.quote-icon {
    font-size: 2rem;
    color: #6c63ff;
    position: absolute;
    top: -10px;
    left: -10px;
}

/* Author details */
.testimonial-author {
    display: flex;
    align-items: center;
    margin-top: 20px;
	margin: 0 auto;
}

.testimonial-author-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
    border: 2px solid #6c63ff;
}

.testimonial-author-info {
    text-align: center; 
	margin: 0 auto; 
}

.author-name {
    font-size: 1rem;
    font-weight: bold;
    margin: 0;
    color: #333;
}

.author-title {
    font-size: 0.875rem;
    color: #777;
    margin: 5px 0 0;
}