/* Hybrid EV Learning Center Mobile Styles */

/* Wraps */
@media screen and (max-width: 1109px) {
	.page_intro_wrap {
		width: 100%;
		max-width: 1030px;
		height: auto;
		margin: 0px auto;
	}
}
@media screen and (max-width: 1000px) {
  .sub_header_wrap {
    width: 95%;
  }
  .hero_wrap {
    width: 95%;
    max-width: 1500px;
    height: auto;
    margin: 0px auto;
  }
  .wp_hero_wrap {
    width: 100%;
  }
  .mobile_page_wrap {
    width: 90%;
    height: auto;
    margin: 0px auto;
  }
}
/* Wraps */

/* Responsive Hero Section */
@media screen and (max-width: 1525px) {
	.tile_icon img {
		height: 35px;
	}
	.tile_text p {
		font-size: 1.2rem;
		width: auto;
		max-width: 90%;
		margin: 0 auto;
		padding-left: 2rem;
		padding-right: 2rem;
		width: 100%;
        text-align: center;
	}
	.thin_hero_text {
        display: block;
		width: 100%;
        text-align: center;
	}
}
@media screen and (max-width: 1443px) {
	.compare_tile_flexed {
		width: 50%;
	}
	.layer_four, .layer_three {
		width: 200px;
	}

	.compare_button_flex {
		justify-content: flex-end;
	}
	.tile_text p {
		font-size: 1.4rem;
	}
}
@media screen and (max-width: 1205px) {
	.hero_kba_block {
		justify-content: center;
	}
	/* Reduce bottom padding on compare models block for mobile */
	.compare_hybrid_models_container {
		padding-bottom: 5rem;
		text-align: center;
	}
	.thin_hero_text {
		font-size: 6.7rem;
	}
	.compare_tile_flexed {
		width: 60%;
	}
	.hero_bottom_bar_bg {
		background-color: unset;
	}
	.layer_four, .layer_three, .layer_two {
		display: none;
	}
	.compare_tile_content {
		display: none;
	}
	.hero_content_block_bg {
		margin: 0px auto;
		width: 558px;
		height: auto;
		padding-top: 3rem;
		padding-bottom: 3rem;
		background-color: rgb(0,0,0, .5);
	}
	.hero_content_block_wrap {
		width: 95%;
		height: auto;
		margin: 0px auto;
	}
	.hero_content_block {
		width: 100%;
		height: auto;
	}
	.welcome_message_text_block h1,
	.welcome_message_text_block h2 {
		text-align: center;
	}
	.welcome_hero h2 {
		text-align: center;
	}
	.hero_kba_container {
		width: 100%;
		height: auto;
		margin: 0px auto;
	}
	.hero_kba_block {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		align-items: stretch;
		flex-direction: column;
	}
	.hero_kba_item {
		margin-top: 2rem;
		width: 100%;
		height: inherit;
		display: flex;
		align-items: stretch;
	}
	.kba_margy_left {
		margin-left: 0%;
	}
	.kba_transparent_white {
		display: flex;
		justify-content: center;
		width: 100%;
	}
	.kba_transparent_white a:link, .kba_transparent_white a:visited {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
		width: 100%;
		justify-content: center;
	}
	.kba_teal {
		display: flex;
		justify-content: center;
		width: 100%;
	}
	.kba_teal a:link, .kba_teal a:visited {
		padding-left: 0px;
		padding-right: 0px;
		width: 100%;
		justify-content: center;
	}
	.kba_primary {
		display: flex;
		justify-content: center;
		width: 100%;
	}
	.kba_primary a:link, .kba_primary a:visited {
		width: 100%;
		justify-content: center;
	}
	.shopping_selector_tiles_bg {
		height: 80px;
	}
	.shopping_selector_flex {
		height: 80px;
	}
	.shopping_selector_title {
		height: 80px;
	}
	.award_icon_c img {
		width: 50px;
	}
	.shopping_selector_title h2 {
		margin-top: 0rem;
		margin-left: .5rem;
		font-size: 1.3rem;
		line-height: 1.5rem;
	}
	.thin_con_text_mod {
		font-size: 1.3rem;
	}
	.tile_text p {
		display: none;
	}
	.compare_btn {
		padding-left: 1.4rem;
		padding-right: 1rem;
	}
	.hero_apps_title {
		display: none;
	}
	/* Mobile: force-hide tooltips regardless of hover */
	.tooltip .tooltiptext,
	.tooltip:hover .tooltiptext {
		display: none !important;
		opacity: 0 !important;
	}
	.compare_tile_kba p {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		padding: 0.6rem 1.8rem;
		width: auto;
		max-width: 90%;
		margin: 0 auto;
		box-sizing: border-box;
		font-size: 1.3rem;
		font-weight: 900;
		color: #1A1A1A;
		border-radius: 50vh;
		border: 2px solid #70c588;
		letter-spacing: .05rem;
		text-transform: uppercase;
		background-color: #fff;
		font-family: 'NeulisSans', sans-serif;
		box-shadow: none;
		line-height: 1.2;
		text-decoration: none;
	}
	.compare_tile_kba p:hover {
		border-width: 3px;
		text-decoration: none;
	}
	.compare_tile_flexed {
		width: 100%;
		padding-top: 0;
		padding-bottom: 0;
		align-items: center;
	}
	.compare_tile_kba {
		margin-top: 0;
		width: 100%;
		max-width: 100%;
	}
	.hero_bottom_bar_left_column {
		width: auto;
	}
	.hero_bottom_bar_right_column {
		margin-left: 0;
		width: 100%;
		max-width: 100%;
		display: flex;
		justify-content: center;
		box-sizing: border-box;
	}
	.layer_one {
		width: 50%;
		padding-top: 1rem;
		padding-bottom: 1rem;
		background: unset;
	}
	.layer_one::after {
		display: none;
	}
}
@media screen and (max-width: 1118px) {
	.hero_apps_container {
		padding-top: 1rem;
		padding-bottom: 3rem;
		width: auto;
	}
	/* Mobile: keep only the Compare CTA label visible */
	.hero_bottom_bar_right_column a:link, .hero_bottom_bar_right_column a:visited {
		position: static;
		bottom: auto;
		left: auto;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.special_graphic_separator {
		display: none;
	}
}
@media screen and (max-width: 1000px) {
	.hero_background_image {
		background: url(../../../../../../cm_jdp_ev_assets/hybrid/hero_section/hero_image_bright_mobile.jpg) no-repeat center center scroll;
	}
}
@media screen and (max-width: 900px) {
	.bold_hero_text {
		width: 100%;
		font-weight: 600;
	}
}
@media screen and (max-width: 620px) {
	.hero_content_block_bg {
		margin: 0px 0px;
		width: 100%;
		height: auto;
		padding-top: 3rem;
		padding-bottom: 3rem;
		background-color: rgb(0,0,0, .5);
	}
	.welcome_message_text_block h1, .welcome_message_text_block h1 {
        font-size: 10vw;
        line-height: 10vw;
		letter-spacing: 0;
    }
	.compare_tile_kba p {
		font-size: 1rem;
		font-weight: 700;
	}

}
@media screen and (max-width: 555px) {
	.layer_one {
		width: unset;
	}
}
@media screen and (max-width: 500px) {
	.hero_bottom_bar_left_column {
		width: 60%;
	}
	.hero_bottom_bar_right_column {
		width: 40%;
	}
	.hybrid_apps_list {
		gap: .2rem;
	}
	/* Keep the compare CTA pill visibly rounded on very small screens */
	.compare_tile_kba p {
		width: auto;
		max-width: 90%;
		margin: 0 auto;
	}
}
/* Responsive Hero Section */

/* Intro Section Responsive */
@media screen and (max-width: 1465px) {
	.tool_cards li {
		width: 47%;
	}
	.tool_card_header_inner {
		height: 300px;
	}
	.tool_card_text {
		height: auto;
	}
}
@media screen and (max-width: 1145px) {
.page_intro_container {
	padding-bottom: 0rem;
}
}
@media screen and (max-width: 1109px) {
	.article_column_left {
		width: 100%;
	}
	.article_frame_texture {
		display: none;
	}
	.article_image {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	.article_image::after {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;

		width: 100%;
		height: 20%; /* bottom 20% coverage */

		background: linear-gradient(
		to top,                     /* fade upward */
		rgba(255,255,255,1) 0%,     /* white at VERY bottom */
		rgba(255,255,255,0) 100%    /* fade to transparent */
		);
	}
	.article_column_right {
		width: 100%;
	}
	.tool_cards_container {
		padding-top: 5rem;
		padding-bottom: 5rem;
	}
	.section_title h2 {
		text-align: center;
	}
	.tools_resources_wrap {
		width: 100%;
		max-width: 1030px;
		height: auto;
		margin: 0px auto;
	}
	.article_flex_col {
		flex-direction: column;
	}
	.article_preview_text h2 {
		text-align: center;
		margin-top: 0rem;
    	margin-left: 0px;
	}
	.article_preview_text p {
		margin-top: 1rem;
	}
}
@media screen and (max-width: 1030px) {
	.page_intro_block {
		padding-top: 5rem;
	}
}
@media screen and (max-width: 800px) {
	.tool_cards_container {
		margin-top: 0rem;
	}
	.tool_cards ul {
		flex-direction: column;
	}
	.tool_cards li {
		width: 100%;
	}
	.tool_cards li a:link, .tool_cards li a:visited {
		height: inherit;
	}
	.tool_card_flex {
		background: linear-gradient(360deg, rgba(8, 7, 15, .9) 10%, rgba(0, 0, 0, 0) 100%);
	}
	.tool_card_header_inner {
		flex-direction: column;
		height: 100;
	}
	.tool_card_icon_container {
		justify-content: center;
	}
	.tool_card_icon {
		width: 80px;
		height: 80px;
		background-color: #1A1A1A;
		isolation: isolate;
		box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
	}
	.tool_card_text {
		margin-top: 1rem;
		margin-left: 0px;
		align-items: center;
	}
	.tool_card_text h3 {
		text-align: center;
	}
	.tool_card_text p {
		text-align: center;
	}
	#load_more_apps {
		font-size: inherit;
	}
}
@media screen and (max-width: 700px) {
	.compare_header_content_layer {
		flex-direction: row !important;
		flex-wrap: wrap;
		gap: clamp(0.35rem, 1vw, 0.45rem);
		justify-content: center;
	}

	.compare_header_title {
		flex: 1 1 65%;
		max-width: 65%;
	}

	.articles li {
		padding-bottom: 2rem;
	}
	.article_preview_tag_name {
		margin-top: 1.5rem;
	}
	.article_preview_text h2 {
		font-size: 10vw;
    	line-height: 10vw;
	}

	.article_preview_tag_name h3 {
		font-size: 1.4rem;
		text-transform: uppercase;
	}
}
/* Intro Section Responsive */




/* Compare Section Responsive */
.compare_header_title {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(0.75rem, 1vw, 1.5rem);
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.compare_icon_for_section {
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
@media screen and (max-width: 1447px) {
	.compare_header_title {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		margin: 0 auto;
		text-align: center;
	}

	.compare_header_content_layer {
		justify-content: center;
	}

	.vs_grid_icon {
		left: -3.5%;
	}
}
@media screen and (max-width: 1269px) {
	.vs_grid_icon {
		left: -4%;
	}
}
@media screen and (max-width: 1200px) {
	.compare_header_content_layer {
		flex-direction: row !important;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
		gap: clamp(0.75rem, 2vw, 1.5rem);
	}

	.compare_header_title {
		flex: 1 1 100%;
		max-width: 100%;
		text-align: center;
		min-width: 280px;
	}

	.compare_icon_for_section {
		justify-content: center;
	}
}
@media screen and (max-width: 1133px) {
	.vs_grid_icon {
		left: -4.5%;
	}
}
@media screen and (max-width: 1109px) {
	.compare_header {
		margin-top: 0rem;
	}
	
	.compare_header_title h2 {
		font-size: 1.6rem;
		line-height: 2rem;
	}
	
	.compare_header_title h3 {
		width: 100%;
		font-weight: 500;
		font-size: 1.5rem;
		letter-spacing: .1px;
		line-height: 2.5rem;
		color: #76CE8D;
		text-transform: uppercase;
		text-align: center;
	}
	
	.compare_header_title h4 {
		margin-top: -0.5rem;
		width: 100%;
		font-weight: 500;
		font-size: 1.5rem;
		letter-spacing: .1px;
		line-height: 2.5rem;
		color: #76CE8D;
		text-transform: uppercase;
		text-align: center;
	}
	
	.compare_header_title p {
		font-size: 1.3rem;
		width: 100%;
		text-align: center;
	}
	
	.compare_header_container {
		padding-bottom: 0; /* Remove padding-bottom for mobile */
	}
	
	/* Grid adjustments */
	.grid_main_title h3 {
		font-size: 2rem;
		line-height: 2.2rem;
	}
	
	.grid_item_one_bg p {
		font-size: 1.4rem;
	}
	
	.grid_item_two_bg p,
	.grid_item_three_bg p {
		font-size: 1.4rem;
	}

	/* reinforce the row flow and keep grid cells from wrapping when the viewport shrinks */


	.grid_item_one_bg,
	.grid_item_two_bg,
	.grid_item_three_bg {
		flex: 1 1 33.33%;
		min-width: 0;
	}
}
@media screen and (max-width: 1111px) {
	.compare_grid_header {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}
	.grid_item_wrap {
		width: 85%;
	}
	.grid_item_two_bg,
	.grid_item_three_bg {
		display: flex;
		align-items: stretch;
	}
	.unselected_thumb_default_bg,
	.unselected_thumb_default,
	.unselect_block_button,
	.unselect_button {
		height: 100%;
	}
	.unselect_button {
		flex-direction: column;
		min-height: clamp(140px, 28vw, 200px);
		gap: 0.15rem;
		margin: 0.5rem 0;
		padding-top: 0.25rem;
		padding-bottom: 0.5rem;
	}
	.kba_text_dark {
		width: 100%;
		min-height: auto;
		flex: 0 0 auto;
		border-left: none;
		padding-left: 0;
		margin-left: 0;
		align-items: center;
	}
	.kba_text_dark .top_text,
	.kba_text_dark .bottom_text,
	.kba_text_dark .bottom_kba {
		white-space: normal;
		overflow: visible;
		text-overflow: unset;
		word-break: break-word;
		text-align: center;
	}
	.unselect_vehicle_kba_icon {
		width: 100%;
		max-width: 160px;
		height: clamp(70px, 18vw, 120px);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.unselect_vehicle_kba_icon img {
		width: auto;
		height: 100%;
		max-width: 100%;
		object-fit: contain;
	}
	.unselected_thumb_default {
		height: 100%;
	}

}
@media screen and (max-width: 977px) {
	.vs_grid_icon {
		left: -5.7%;
	}
}
@media screen and (max-width: 900px) {
	.compare_header_title h3,
	.compare_header_title h4 {
		width: 100%;
		font-weight: 500;
		font-size: 1.5rem;
		letter-spacing: .1px;
		line-height: 2.5rem;
		color: #76CE8D;
		text-transform: uppercase;
		text-align: center;
	}
	
	.compare_header_title p br {
		display: none;
	}
	
	.compare_icon_for_section {
		margin-top: 1.5rem;
	}

	.compare_header_content_layer {
		flex-direction: row !important;
		flex-wrap: wrap;
		gap: clamp(0.5rem, 2vw, 1rem);
		justify-content: center;
		align-items: center;
	}

	.compare_header_title {
		flex: 1 1 100%;
		max-width: 100%;
	}

	.compare_icon_for_section {
		width: clamp(100px, 22vw, 180px);
		justify-content: center;
	}
	
	/* Grid responsive */
	.grid_main_title h3 {
		font-size: 1.8rem;
		line-height: 2rem;
		text-align: center;
	}
	
	.grid_item_one_icon_item {
		margin-left: 5%;
		width: 15%;
	}
	
	.grid_item_one_text_item {
		width: 75%;
	}
	
	.compare_sec_title_icon {
		width: 40px;
		height: 40px;
	}
	
	.compare_sec_title_icon img {
		width: 30px;
		height: 30px;
	}

}
@media screen and (max-width: 977px) {
	.vs_grid_icon {
		left: -5.5%;
		width: 25px;
    	height: 25px;
	}
}
/* Critical override for desktop's 768px column rule */
@media screen and (max-width: 768px) {
	
}

@media screen and (max-width: 800px) {
	/* Force compare_body to stay as row (2 columns) - override desktop column rule */
	.compare_body {
		flex-direction: row !important;
		display: flex !important;
		flex-wrap: nowrap;
	}
	


	.compare_header_content_layer {
		flex-direction: row !important;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
		gap: clamp(0.4rem, 1.2vw, 0.5rem);
	}

	.compare_header_title {
		flex: 1 1 100%;
		max-width: 100%;
	}

	
	/* Keep grid as 3-column row layout for side-by-side comparison */
	.compare_grid_flex {
		flex-direction: row;
		height: auto;
	}
	
	.grid_item_one_bg,
	.grid_item_two_bg,
	.grid_item_three_bg {
		width: 33.33%;
		border-left: 1px solid rgba(21, 21, 21, 0.5);
	}
	
	.grid_item_one_bg {
		border-left: none;
	}
	
	/*
	.grid_item_header {
		height: auto !important;
		min-height: 80px;
	}
	*/

	.compare_grid_header {
		flex-direction: row;
	}
}
@media screen and (max-width: 713px) {
	.vs_grid_icon {
		left: -6%;
		width: 25px;
    	height: 25px;

		display: none;
	}
}

@media screen and (max-width: 700px) {
	
	.compare_header_title h2 {
		font-size: 1.4rem;
		line-height: 1.8rem;
	}
	
	.compare_header_title p {
		font-size: 1.1rem;
		width: 100%;
		text-align: center;
	}
	
	.comp_vehicle_one,
	.comp_vehicle_two {
		flex: 0 0 40%;
		width: 40%;
		padding: 0.5rem;
		min-width: 140px;
	}
	
	.comp_text h3 {
		font-size: 1.5rem;
		line-height: 1.8rem;
	}
	
	.compare_top_header p {
		font-size: 1.3rem;
		width: 100%;
		text-align: center;
	}
	
	/* Keep grid as 3-column row - scale content for mobile */
	.compare_grid_flex {
		flex-direction: row;
	}
	
	.compare_grid_header {
		flex-direction: row;
	}
	
	.grid_item_one_bg,
	.grid_item_two_bg,
	.grid_item_three_bg {
		width: calc(33.33% - 0.3rem);
		min-width: 0;
	}
	
	.grid_item_two_bg,
	.grid_item_three_bg {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.grid_main_title h3 {
		font-size: 1.3rem;
		line-height: 1.5rem;
		padding: 0.5rem;
		text-align: center;
	}
	
	.grid_item_one_bg {
		flex-direction: column;
		padding: 0.5rem 0;
		justify-content: center;
		align-items: center;
		gap: 0.25rem;
	}
	
	.grid_item_one_icon_item {
		margin-left: 0;
		width: 100%;
		margin-bottom: 0.5rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.grid_item_one_text_item {
		width: 100%;
		justify-content: center;
		align-items: center;
		text-align: center;
		padding: 0 0.6rem;
	}
	
	.grid_item_one_bg h3 {
		font-size: 1.15rem;
		text-align: center;
		padding: 0 0.6rem;
	}
	
	.grid_item_one_bg p {
		font-size: 1rem;
		text-align: center;
		padding: 0 0.25rem;
	}
	
	.grid_item_two_bg p,
	.grid_item_three_bg p {
		font-size: 1.15rem;
		font-weight: 400;
		padding: 0 0.45rem;
		text-align: center;
	}

	.grid_item_one {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		padding: 0 0.25rem;
	}
	
	/*
	.vs_grid_icon {
		width: 22px;
		height: 22px;
	}
	*/
	
	.unselected_thumb_default {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
		height: 100%;
	}
	
	.kba_text_dark .top_text,
	.kba_text_dark .bottom_text {
		font-size: 1rem;
	}
	
	.kba_text_dark .bottom_kba {
		font-size: 0.9rem !important;
	}

}

@media screen and (max-width: 500px) {
	.compare_header_title h2 {
		font-size: 10vw;
		line-height: 10vw;
	}
	
	.compare_header_title h3,
	.compare_header_title h4 {
		width: 100%;
		font-weight: 500;
		font-size: 1.5rem;
		letter-spacing: .1px;
		line-height: 2.5rem;
		color: #76CE8D;
		text-transform: uppercase;
		text-align: center;
	}
	
	.compare_header_title p {
		font-size: 1rem;
		width: 100%;
		text-align: center;
	}
	
	.compare_grid_flex {
		flex-direction: row;
	}

	.grid_item_one_bg,
	.grid_item_two_bg,
	.grid_item_three_bg {
		width: calc(33.33% - 0.2rem);
		min-width: 0;
	}

	.comp_text h3 {
		font-size: 1.2rem;
		line-height: 1.5rem;
		text-align: center;
	}
	
	.compare_top_header p {
		font-size: 1.1rem;
		width: 100%;
		text-align: center;
	}
	
	.special_c {
		font-size: 1.5rem;
	}
	
	/* Grid */
	.grid_main_title h3 {
		font-size: 1.3rem;
		line-height: 1.6rem;
	}
	
	.grid_item_one_bg p {
		font-size: 1rem;
	}
	
	.grid_item_two_bg p,
	.grid_item_three_bg p {
		font-size: 1.15rem;
	}

	/* Ensure the dynamic Cars for Sale link fits on narrow screens */
	.output_type a:link,
	.output_type a:visited {
		font-size: 0.8rem;
		line-height: 1.2;
		padding-left: 0.9rem;
		padding-right: 0.9rem;
		max-width: 100%;
		box-sizing: border-box;
		white-space: normal;
		text-align: center;
		word-break: break-word;
	}

	/* Add comfortable vertical padding for each compare cell on mobile */
	.grid_item_one_bg,
	.grid_item_two_bg,
	.grid_item_three_bg {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}

	.compare_header_content_layer {
		flex-direction: row !important;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: clamp(0.25rem, 1vw, 0.5rem);
		padding-bottom: 0.5rem;
	}

	.compare_header_title {
		flex: 1 1 100%;
		max-width: 100%;
		margin: 0 auto;
		text-align: center;
	}

	.compare_icon_for_section {
		justify-content: center;
		align-items: center;
		padding-bottom: 0.3rem;
	}

	
	.unselected_thumb_default {
		height: 100%;
	}
	

	
	.kba_text_dark .top_text,
	.kba_text_dark .bottom_text {
		font-size: 0.9rem;
	}
	
	.kba_text_dark .bottom_kba {
		font-size: 0.8rem !important;
	}
}

@media screen and (max-width: 375px) {
	.compare_header_title h2 {
		font-size: 10vw;
		line-height: 10vw;
	}
	
	.compare_header_title h3,
	.compare_header_title h4 {
		width: 100%;
		font-weight: 500;
		font-size: 1.5rem;
		letter-spacing: .1px;
		line-height: 2.5rem;
		color: #76CE8D;
		text-transform: uppercase;
		text-align: center;
	}
	
	.compare_header_title p {
		font-size: 0.9rem;
		width: 100%;
		text-align: center;
	}
	
	.compare_icon_for_section {
		margin-top: 1rem;
	}

	
	.comp_text h3 {
		font-size: 1rem;
		line-height: 1.3rem;
	}
	
	.compare_top_header p {
		font-size: 1rem;
		width: 100%;
		text-align: center;
	}
	
	/* Grid iPhone SE */
	.compare_grid_flex {
		flex-direction: row;
	}

	.grid_main_title h3 {
		font-size: 1.1rem;
		line-height: 1.4rem;
	}
	
	.grid_item_one_bg p {
		font-size: 0.9rem;
	}
	
	.grid_item_two_bg p,
	.grid_item_three_bg p {
		font-size: 1.15rem;
	}

	.grid_item_one_bg,
	.grid_item_two_bg,
	.grid_item_three_bg {
		width: calc(33.33% - 0.2rem);
		min-width: 0;
		padding: 0.5rem 0.1rem;
	}

	.compare_header_content_layer {
		flex-direction: row !important;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.15rem;
	}

	.compare_header_title {
		flex: 1 1 100%;
		max-width: 100%;
		margin: 0 auto;
		text-align: center;
	}
	
	.unselected_thumb_default {
		height: 100%;
	}
	
	
	.kba_text_dark .top_text,
	.kba_text_dark .bottom_text {
		font-size: 0.8rem;
	}
	
	.kba_text_dark .bottom_kba {
		font-size: 0.7rem !important;
	}

}

@media screen and (max-width: 300px) {
	.compare_header_title h2 {
		font-size: 0.9rem;
		line-height: 1.2rem;
	}
	
	.compare_header_title p {
		font-size: 0.85rem;
	}

	.compare_header_content_layer {
		flex-direction: row !important;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.1rem;
	}

	.compare_header_title {
		flex: 1 1 65%;
		max-width: 100%;
		margin: 0 auto;
		text-align: center;
	}
	
	
	.comp_vehicle_one,
	.comp_vehicle_two {
		flex: 0 0 50%;
		width: 50%;
		padding: 0.1rem;
		min-width: 100px;
	}
	
	.comp_vehicle_inner img {
		max-width: 100%;
	}
	
	.comp_text h3 {
		font-size: 0.9rem;
		line-height: 1.2rem;
	}
	
	.compare_top_header p {
		font-size: 0.9rem;
		width: 100%;
		text-align: center;
	}
	
	.special_c {
		font-size: 1.2rem;
	}
	
	/* Grid extreme small */
	.compare_grid_flex {
		flex-direction: row;
	}
	.grid_main_title h3 {
		font-size: 1rem;
		line-height: 1.3rem;
	}
	
	.grid_item_one_bg p {
		font-size: 0.85rem;
	}
	
	.grid_item_two_bg p,
	.grid_item_three_bg p {
		font-size: 1.15rem;
	}

	.grid_item_one_bg,
	.grid_item_two_bg,
	.grid_item_three_bg {
		width: calc(33.33% - 0.15rem);
		min-width: 0;
		padding: 0 0.1rem;
	}
	
	.unselect_vehicle_kba_icon {
		margin-right: 0rem;
	}

	.kba_text_dark {
		margin-left: 0rem;
	}
	
	.kba_text_dark .top_text,
	.kba_text_dark .bottom_text {
		font-size: 0.75rem;
	}
	
	.kba_text_dark .bottom_kba {
		font-size: 0.65rem !important;
	}

}

@media screen and (max-width: 1447px) {
	.compare_header_title {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		text-align: center !important;
	}

	.compare_header_content_layer {
		justify-content: center !important;
	}
}

.compare_header_content {
	width: 100%;
	height: auto;
}
/* Compare Section Responsive */

/* Phrase stack */
@media screen and (max-width: 640px) {
	.os-phrases p {
		height: auto;
		flex-direction: column;
		text-align: center;
	}
}
/* Phrase stack */

/* Common Questions Section Responsive */
@media screen and (max-width: 900px) {
	.c_hero_overlay_bottom {
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 3;
		width: 100%;
		height: inherit;
		background: rgb(0, 0, 0);
		background: linear-gradient(360deg, rgba(8, 7, 15, 1) 0%, rgba(3, 3, 3, 0) 50%);
		opacity: 1;
	}
}
@media screen and (max-width: 1030px) {
	.cq_video_title p {
		width: 100%;
	}
	#na_title:after {
		width: 18rem;
	}
	.common_questions_content_layer {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}
	.cq_container_bg {
		margin-top: 3rem;
	}
	.cq_question_content {
		flex-direction: column;
	}
	.question_video_container {
		width: 100%;
	}
	.cq_content_container {
		margin-top: 3rem;
		width: 100%;
	}
	.cq_content {
		margin-left: 0%;
		width: 100%;
		height: auto;
		position: relative;
	}
	.safety_list_item:first-child {
		margin-top: 0px;
	}
	.sl_title {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
}
/* Common Question Section */

/* Compare Input Responsive */
@media screen and (max-width: 1205px) {
	.section_title h3 {
        font-size: 6rem;
		text-align: center;
	}
	.section_title h4 {
		margin-top: -1rem;
        font-size: 6rem;
		text-align: center;
	}
	.section_title p {
		margin-top: 1rem;
		font-size: 1.5rem;
		line-height: 2.8rem;
		text-align: center;
	}
}
@media screen and (max-width: 1051px) {
	.compare_flexed {
		gap: .7rem;
	}
	.compare_block {
		margin-top: 5rem;
	}
	.compare_vs_break {
		width: 40px;
	}
	.section_title h3 {
        font-size: 5rem;
	}
	.section_title h4 {
		margin-top: 0rem;
        font-size: 5rem;
	}
}
@media screen and (max-width: 900px) {
	.compare_hybrid_bg {
		padding-top: 5rem;
		padding-bottom: 5rem;
	}
}
@media screen and (max-width: 870px) {
	.section_title h4, .section_title h3 {
		font-size: 2.8rem;
	}
}
/* Compare Input Responsive */

@media screen and (max-width: 900px) {
	.section_title h2 {
		font-size: 4vw;
		line-height: normal !important;
	}
}
@media screen and (max-width: 700px) {
	.sl_text {
    	width: 80%;
	}
	.section_title h2 {
		font-size: 10vw;
		line-height: 10vw;
	}
	.tools_resources_container .section_title h2 {
		font-size: 10vw;
		line-height: 10vw;
	}
	.common_questions_container .section_title h2 {
		font-size: 10vw;
		line-height: 10vw;
	}
	/* Tighten top spacing for common questions on small screens */
	.common_questions_container {
		padding-top: 5rem;
		padding-bottom: 5rem;
	}
	.tr_button_wrap {
		max-width: auto;
		width: 95%;
	}
	.q_a_video_wrap {
		width: 300px;
		height: auto;
		margin: 0px auto;
	}
	.cq_video_title p {
		font-size: 6vw;
	}
}
@media screen and (max-width: 400px) {
	.q_a_video_wrap {
		width: 100%;
		height: auto;
		margin: 0px auto;
	}
}
/* Common Questions Section Responsive */

/* Banner 2 Responsive */
@media screen and (max-width: 1462px) {
	.featured_image_container {
		display: none;
	}
	.banner_para h2 {
		width: 100%;
		text-align: center;
	}
	.banner_para h3 {
		text-align: center;
	}
	.banner_para {
		width: 100%;
	}
	.banner_para p {
		text-align: center;
	}
	.banner_two_kba_block {
		margin-top: 2rem;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}
	/* Ensure the two pill buttons inside banner_two_kba_block stack with space between */
	.banner_two_kba_block .hero_kba_item {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		margin-top: 0;
	}
	.banner_two_kba_block .hero_kba_item > .kba_primary {
		margin-bottom: 2rem;
    }
}
@media screen and (max-width: 1200px) {
	.banner_two_container {
		height: 100vh;
	}
	.banner_two {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.banner_two h1 {
		font-size: 8.5vw;
		line-height: normal;
	}
	.banner_para h2 {
		font-size: 7vw;
		line-height: 7vw;
	}
	.banner_para p {
		width: 100%;
	}
	.banner_two_columns {
		flex-direction: column;
	}
	.banner_para {
		display: block;
		width: 100%;
	}
}
@media screen and (max-width: 900px) {
	.large_ad_container {
		padding-top: 8rem;
		padding-bottom: 8rem;
		height: auto;
	}
	.large_ad_overlay_bottom {
		height: 100%;
		background: #102330;
		background: linear-gradient(360deg, rgba(16, 35, 48, 0.9) 5%, rgba(16, 35, 48, 0) 100%);
	}
	.banner_two {
		height: auto;
	}
	.hero_kba_item {
		height: auto;
		flex-direction: column;
	}
}
@media screen and (max-width: 600px) {
	.banner_two_container {
		width: 100%;
		height: 110vh;
		background-color: #000;
		position: relative;
		background: url(../../../../../../cm_jdp_ev_assets/backgrounds/banner_two.jpg) no-repeat center center fixed;
		-webkit-background-size: auto 100%;
		-moz-background-size: auto 100%;
		-o-background-size: auto 100%;
		background-size: auto 100%;
	}
	.hero_kba_block, .banner_two_kba_block {
		flex-direction: column;
	}
	.kba_margy_left {
		margin-left: 0px !important;
	}
	.kba_transparent_red {
		width: 100%;
	}
	.kba_transparent_red a:link, .kba_transparent_red a:visited {
		padding-left: 0rem;
		padding-right: 0rem;
		width: 100%;
		justify-content: center;
	}
	.kba_transparent_red a:link, .kba_transparent_red a:visited {
		padding-left: 0rem;
		padding-right: 0rem;
		width: 100%;
		justify-content: center;
	}
}
/* Banner 2 Responsive */

/* Articles Responsive Section */
@media screen and (max-width: 1150px) {
	.section_nav_dark {
		box-shadow: none;
	}
	.section_nav {
		background-color: unset;
	}
	.section_nav ul {
		display: none;
	}
	.section_nav_selector {
		text-decoration: none;
		display: inline-block;
		padding-left: 1rem;
		padding-right: 3rem;
		height: 35px;
		text-transform: capitalize;
		font-weight: normal;
		font-size: 1.5rem;
		color: #fff;
		background-color: #1A1A1A;
		border: 1px solid rgba(255, 255, 255, .2) !important;
		border-radius: 5px;
	}
	.section_nav_option {
		font-weight: normal;
		font-size: 1.2rem;
		color: #fff;
		background-color: #212121;
		cursor: pointer;
	}
}
@media screen and (max-width: 1030px) {
	.articles {
		margin-top: 0px;
	}
	.articles li {
		margin-top: 2rem;
		width: 100%;
		height: auto;
	}
	.article_preview {
		flex-direction: column;
	}
	.article_content_ts {
		width: 100%;
	}
	.article_preview_title {
		width: 100%;
	}
	.article_preview_media {
		width: 100%;
		height: auto;
	}
	.article_preview_tag_name {
		top: 1rem;
	}
	.articles_wrap_preview_inner {
		padding-top: 2rem;
		padding-bottom: 2rem;
		width: 100%;
	}
	.article_preview > .articles_wrap_preview_inner {
		margin-left: 0px;
	}
	.article_link_wrap {
		width: 100%;
	}
	.article_link_preview h4 a:link,
	.article_link_preview h4 a:visited {
		width: 100%;
		font-size: 2vw;
	}
	.view_all_articles_container {
		display: none;
	}
}
@media screen and (max-width: 800px) {
	.news_articles_container {
		padding-top: 5rem;
		padding-bottom: 5rem;
	}
}
@media screen and (max-width: 700px) {
	#see_articles, #hide_articles {
		margin-top: 2rem;
		display: block;
		width: 100%;
		height: auto;
		padding-top: 10px;
		padding-bottom: 6px;
		transition: .4s ease;
		outline: none;
		outline-style: none;
		text-decoration: none;
		text-transform: capitalize;
		text-align: center;
		background-color: #3d3c3d;
		color: #fff;
		font-size: 1.6rem;
		font-weight: normal;
		border-radius: 5px;
		opacity: .5;
		cursor: pointer;
	}
	#see_articles:hover {
		opacity: 1;
	}
	.section_header {
		flex-direction: column;
	}
	.section_nav {
		margin-left: 0%;
		justify-content: center;
	}
	.section_nav_selector {
		width: 100%;
	}
	.article_see_more {
		width: 20px;
	}
	#hide_articles {
		display: none;
	}
	.articles li {
		width: 100%;
	}
	.article_link_preview h4 a:link,
	.article_link_preview h4 a:visited {
		font-size: 4vw;
	}
}
/* Articles Responsive Section */

/* Patrons Section Responsive */
@media screen and (max-width: 1030px) {
	.patrons_container {
	   /* background: url(../../../../../../cm_jdp_ev_assets/backgrounds/kia_featured-content_desktop_inspired-to-move.jpg) no-repeat center center fixed; */
	    background: url(../../../../../../cm_jdp_ev_assets/patrons/cev_bg.jpg) no-repeat 78% center;
		-webkit-background-size: auto 100%;
		-moz-background-size: auto 100%;
		-o-background-size: auto 100%;
		background-size: auto 100%;
	}
	#p_slide_1 {
		padding-top: 4rem;
		padding-bottom: 4rem;
		height: auto;
	}
	.p_content_layer {
		height: auto;
	}
	.p_content_text {
		height: auto;
	}
}
@media screen and (max-width: 900px) {
	.patrons_header h1 {
		font-size: 8vw;
		line-height: 12vw;
		font-weight: 200;
	}
	.patrons_header p {
		width: 90%;
	}
}
@media screen and (max-width: 700px) {
	.patrons_header h2 {
		font-size: 10vw;
		line-height: 10vw;
	}
	.p_content_text h3 {
		font-size: 8vw;
	}
	.p_content_text p {
		font-size: 4vw;
		text-align: center;
	}
	.p_content_text h6 a:link,
	.p_content_text h6 a:visited {
		padding-top: 3%;
		padding-bottom: 3%;
		font-size: 5vw;
	}
}
@media screen and (max-width: 700px) {
	.modal {
		padding: 50px;
		width: 70% !important;
	}
	.wp_hero_container {
		background-position-y: 0px;
	}
}
/* Patrons Section Responsive */

/* Additional mobile styles for centered section */
@media screen and (max-width: 480px) {
	.section_title h3 {
		font-size: 6vw;
	}
	.section_title h4 {
		font-size: 5vw;
	}
	.section_title p {
		font-size: 4vw;
		padding: 0 0.5rem;
	}
}