/* ======================================================================== */
/* ! Desktop large
/* ======================================================================== */

@media screen and (min-width: 1728px) {

	/* TESTING */
	#copy_block_intro h1 {
		xcolor: greenyellow;
	}


}








/* ======================================================================== */
/* ! 15" laptop
/* ======================================================================== */

@media (min-width: 1441px) and (max-width: 1727px) {

	/* TESTING */
	#copy_block_intro h1 {

	}


	/* ===== Row : content width ===== */
	.row {
		max-width: -webkit-fill-available;
		min-width: -webkit-fill-available;
		margin: 0 5%;
	}

}






/* ======================================================================== */
/* ! Approach diagram for 1440px and below
/* ======================================================================== */

@media screen and (max-width: 1440px) { 


	.approach__diagram_wrapper.REALITY_view .messy_diagram_lines,
	.approach__diagram_wrapper.REALITY_view .approach_step	{
		display: none;
	}

	.approach__diagram_wrapper.REALITY_view {
		xbackground: url('../images/Approach/Approach_diagram__1281x245__aspect_9x2.svg') no-repeat 50% 0;
		background-size: 100% auto;
		aspect-ratio: 9 / 2 !important;
		height: auto;
	}

	/* for scrollable image */
	.approach__diagram_wrapper.REALITY_view {
		min-height: 275px;
	}

	.approach__diagram_wrapper.REALITY_view .mobile_view__scrollable {
		opacity: 1;
		overflow-y: hidden;
		overflow-x: scroll;
	}


	.column {
		margin-bottom: 2rem;
	}



}










/* ======================================================================== */
/* ! 13" Laptop

/* changed from 1025 - 1440px as the styles were the same

@media (min-width: 1281px) and (max-width: 1440px) {
@media (min-width: 1025px) and (max-width: 1280px) {


/* ======================================================================== */

@media (min-width: 1025px) and (max-width: 1440px) {

	/* TESTING */
	#copy_block_intro h1 {
		xcolor: red;
	}


	/* ===== Row : content width ===== */
	.section_title .title_wrapper {
		align-items: flex-start;
	}


	/* ===== Navbar ===== */
	.navbar {
		padding: 1.6rem 5%;
	}


	/* ===== Row : content width ===== */
	.row {
		max-width: -webkit-fill-available;
		min-width: -webkit-fill-available;
		margin: 0 5%;
	}


	/* ===== Text Blocks ===== */
	.copy_block {
		width: 100%;
		min-width: 100%;
		max-width: 100%;
	}
	/* copy blocks that at 70% on desktop */
	#copy_block_intro .row.text .copy_block.intro_block .intro_size {

	}
	/* column content - display 2 across */
	.copy_block.display_columns {
		flex-direction: row;
		gap: 6%;
		flex-wrap: wrap;
	}

	.copy_block.display_columns.columns_5 .column {
		flex: 0 0 15.2%;	
	}

	.copy_block.display_columns.columns_4 .column {
		flex: 0 0 47%;	
	}

	.copy_block.display_columns.columns_3 .column {
		flex: 0 0 29%;	
	}

}






/* ======================================================================== */
/* ! Approach diagram for 1440px and below
/* ======================================================================== */

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


	.approach__diagram_wrapper.LOGICAL_view {
		flex-direction: column;
		gap: 1rem;
	}
	.approach__diagram_wrapper.LOGICAL_view .approach_step {
		flex-direction: row;
			width: 100%;
	}
	.approach__diagram_wrapper.LOGICAL_view .approach_step .icon_wrapper {
		width: 6rem;
    	height: 6rem;
    	font-size: 3.6rem;
	}



	/* Resize toggle switch */

	.toggle_switch_wrapper {

	}

}











/* ======================================================================== */
/* ! iPad Landscape
	-	iPad 
	-	Nest Hub
/* ======================================================================== */

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


	/* !!!!!!!! ============= TO ADD ============= !!!!!!!! */
	/*
		-	Approach page



	*/
	/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */



	/* TESTING */
	#copy_block_intro h1 {

	}


	/* ===== Navbar ===== */
	.navbar {
		padding: 1.6rem 5%;
	}


	/* ===== Row : content width ===== */
	.row {
		max-width: -webkit-fill-available;
		min-width: -webkit-fill-available;
		margin: 0 5%;
	}


	/* ===== Text Blocks ===== */
	.copy_block {
		width: 100%;
		min-width: 100%;
		max-width: 100%;
	}
	/* copy blocks that at 70% on desktop */
	#copy_block_intro .row.text .copy_block.intro_block .intro_size {
		width: 100%;
		min-width: 100%;
		max-width: 100%;
	}
	/* column content - display 2 across */
	.copy_block.display_columns {
		flex-direction: row;
		gap: 6%;
		flex-wrap: wrap;
	}

	.copy_block.display_columns.columns_5 .column {
		flex: 0 0 29.3%;	
	}

	.copy_block.display_columns.columns_4 .column {
		flex: 0 0 47%;	
	}

	.copy_block.display_columns.columns_3 .column {
		flex: 0 0 29%;	
	}

}








/* ======================================================================== */
/* ! Global changes for devices below 960
/* ======================================================================== */

@media screen and (max-width: 960px) {

	/* TESTING */
	#copy_block_intro h1 {

	}


	/* ===== Navbar ===== */
	.navbar {
		padding: 1.6rem 5%;
	}


	/* ===== Row : content width ===== */
	.row {
		max-width: -webkit-fill-available;
		min-width: -webkit-fill-available;
		margin: 0 5%;
	}

	/* ===== Text Blocks ===== */
	.copy_block {
		width: 100%;
		min-width: 100%;
		max-width: 100%;
	}
	/* copy blocks that at 70% on desktop */
	#copy_block_intro .row.text .copy_block.intro_block .intro_size {
		width: 100%;
		min-width: 100%;
		max-width: 100%;
	}
	/* stack column content - 1 column only */
	.copy_block.display_columns {
		flex-direction: column;
		gap: 1rem;
	}
	.copy_block .column {
		flex: 0 0 0 !important; /* need to have flex basis as 0 when stacked */
	}

}




/* ======================================================================== */
/* ! Landscape phone to portrait tablet:
	-	Surface Duo (540px)
/* ======================================================================== */

@media screen and (max-width: 767px) {

	/* font-size = 56px */
	#copy_block_intro h1 {
		line-height: 5.8rem;
	}

	.navbar.shadow {
		background: rgba(255, 255, 255, 0.95);
		box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6);
		backdrop-filter: blur(0.6rem);
	}

}




/* ======================================================================== */
/* ! Navbar > stack on screens 660px and below
/* ======================================================================== */

@media screen and (max-width: 660px) {

	/* total height - 120px */
	.navbar {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
	}

	.approach_page #copy_block__intro.content .wrapper, 
	.approach_page .top_section.content .wrapper,
	.work_page #copy_block__intro.content .wrapper, 
	.work_page .top_section.content .wrapper {
		padding-top: 16rem;
	}


	/* copy block icons */

	.copy__icon_wrapper .icon {
		height: 6rem;
		font-size: 6rem;
	}

	.copy__icon_wrapper {
		margin-bottom: 2rem;
	}

}




/* ======================================================================== */
/* ! Landscape phone to portrait tablet:
	-	Surface Duo (540px)
/* ======================================================================== */

@media screen and (max-width: 430px) {

	/* Page Header */
	#copy_block_intro h1 {
		font-size: 4.8rem;
		line-height: 5rem;


		font-size: 4.4rem;
		line-height: 4.6rem;
	}

	body {
		font: 1.8rem/2.6rem ProximaNova-Regular, Helvetica, Arial, sans-serif;
	}



	/* ===== Toggle switch ===== */
	/* default size  / iOS Size */

	.toggle_switch_wrapper {
		font-size: 2rem;
		padding-left: 0;
		padding-right: 0;
	}

	.toggle_switch {
		width: 3.2rem;
		height: 2rem;
		border-radius: 1rem;

		width: 7.6rem;
		height: 4.6rem;
		border-radius: 2.3rem;

		width: 6.4rem;
		height: 4rem;
		border-radius: 2rem;
	}

	.toggle_switch .toggle_slider {
		height: 1.4rem;
		width: 1.4rem;

		height: 4rem;
		width: 4rem;

		height: 3rem;
		width: 3rem;
	}

	.toggle_switch .selection_area {
		height: 2rem;
		width: 1.6rem;

		height: 4.6rem;
		width: 3.8rem;

		height: 4rem;
		width: 3.2rem;
	}

	.toggle_switch .toggle_slider {
		top: 0.3rem;
		left: 0.3rem;


		top: 0.5rem;
		left: 0.6rem;
	}


	.toggle_switch.right_selected .toggle_slider {
    	left: 1.5rem;

    	left: 3.1rem;

    	left: 2.8rem;
	}

	.toggle_switch_placement {
		justify-content: center;
	}





}