/* Navbar */
@media screen and (max-width: 1440px) {
	.navbar {
		width: 85%;
		margin: auto;
		justify-content: space-between;
	
	}
	
	.navbar .cntctinfo {
		width: auto;
	}
	
	.navbar .cntcticonbx {
		width: auto;
	}
	
	.navbar .cntcticonbx img {
		width: 20rem;
	}
	
	header {
		height: 20vh;
	}
	
	.logo img {
		width: 4em;
		height: 2.5em;
	}
	
	#navbar-sticky {
		height: 18vh;
	}
	
	.socnetbx {
		right: 5%;
		bottom: 1em;
	}
	
	.hero button.btn2 {
		margin-right: 50%;
    	transform: translate(-50%, -50%);
	}
	
	section.hero, section.herohdr {
		height: 100vh;
		/*background: url("../img/pgs/heroimg-tite.webp");
		background-size: 170%;
		background-position: -70px 90px;
		background-repeat: no-repeat; */
	}
	
	body.dark section.herohdr {
		height: 100vh;
		/* margin-top: 6.125rem; */
	}
	
}

@media screen and (max-width: 1010px) {
	#menu-btn {
        display: block;
    }

	body.dark #menu-btn {
		color: #fff; /** was ccc **/
		text-shadow: 2px 2px 1px rgba(0,0,0,0.5);
		font-size: 1.25rem;
	}

    .navbar {
        position: relative;
    }

    .navbar .list {
        position: absolute;
        top: 100%;
        right: 10%;
        width: 100%;
        height: 0;
        flex-direction: column;
        justify-content: center;
        background-color: #ccc;
        border-radius: 10px;
        overflow: hidden;
    }

	body.dark .navbar .list {
		background-color: #ccc;
	}

    #nav-open {
        height: 400px;
        max-height: 100vh;
    }
	
	#navbar-sticky {
		height: 20vh;
	}
	
}

/* Hero Section */

@media screen and (max-width: 768px) { /*** was 600  ***/
	
	header {
		height: 12vh;
	}
	
	.navbar {
		width: 100%;
		margin: auto;
		padding: 0rem 1rem;
		justify-content: space-between;
	
	}
	
	 /* 1. Force the red gradient container to expand with your menu list */
	   #navbar-sticky {
		height: auto !important; 
		position: fixed !important; /* Locks it to top of glass during scroll */
		padding-bottom: 1rem;
	  }
	

	  /* 3. Turn the navigation links from a horizontal line into a clean vertical stack */
	  .navbar .list {
		display: none; /* Controlled by your jQuery click listener toggling #nav-open */
		flex-direction: column !important;
		width: 80% !important;
		padding: 0 !important;
		margin-top: 1rem;
	  }

	  /* When the list opens, force it back to flex layout */
	  .navbar .list#nav-open {
		display: flex !important; 
	  }


	  /* 4. THE MAIN FIX: Force your submenus to drop in-flow and turn opaque */
	  .list .submenu {
		position: relative !important; /* Detaches desktop hovering parameters */
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		box-shadow: none !important;   /* Cleans up mobile screen shadows */
		background: rgba(0, 0, 0, 0.05) !important; /* Gives subtle background depth */

		/* Overrides the invisible fade block rules */
		opacity: 1 !important; 
		visibility: visible !important;
		transition: none !important; 
	  }
	
	body.dark .navbar .submenu > li {
		padding: 0rem 0rem .125rem 0rem;
	}

	  /* 5. Make links display as block elements so they have comfortable tap targets */
	  .navbar .list li {
		width: 100% !important;
		padding: 0.25rem 1rem !important;
	  }
	
	
	.logo img {
		width: 4rem;
		height: 2rem;
	}
	
	.navbar .cntcticonbx {
		width: auto;
	}
	
	.navbar .cntcticonbx img {
		width: 13rem;
	}
	
	.navbar .cntctinfo {
		width: 60%;
		padding: 0;
		padding-right: .5rem;
	}
	
	.navbar .cntctinfo h2 {
		font-size: .9rem;
		display: none;
	}
	
	.navbar .cntctinfo h3 {
		font-size: .65rem;
		letter-spacing: 0;
		display: none;
	}
	
	section.hero, section.herohdr {
		height: 45vh;
		background: url("../img/pgs/heroimg-tite.webp");
		background-size: 170%;
		background-position: -70px 90px;
		background-repeat: no-repeat;
	}
	
	body.dark section.herohdr {
		height: 34.5vh;
		margin-top: 6.125rem;
	}
	
	#contacthdr, #loginhdr, #adminprtlhdr {
		background: url("../img/pgs/contactus.webp");
		background-size: cover;
		background-position: top left;
		background-repeat: no-repeat;
	}

	#serviceshdr {
		background: url("../img/pgs/services-cell.webp");
		background-size: cover;
		background-position: 0px 20px;
		background-repeat: no-repeat;
	}

	#aboutushdr {
		height: 24vh;
		background: url("../img/pgs/about-cell.webp");
		background-size: cover;
		background-position: bottom;
		background-repeat: no-repeat;
	}
	
	.herohdr .container {
		width: 100%;
	}
	
	.hero .name {
		margin-top: -.5em;
	}
	
	.hero .description {
		margin-top: 14em;
		width: 60%;
	}
	
	.hero .slogan, .herohdr .slogan {
		display: block;
		font-size: 1.8rem;
		margin: 0;
		margin-top: 60%;
		padding: 0;
		width: 100%;
		color: #fff;
		text-shadow: -3px 3px 6px rgba(0, 0, 0, .99);
	}
	
	.herohdr .slogan {
		font-size: 1.7rem;
		letter-spacing: .05rem;
		margin: 20% 0 0 10%;
	}
	
	#aboutushdr .slogan {
		text-shadow: -2px 2px 4px rgba(0, 0, 0, 1);
	}
	
	.hero button {
		top: 20rem;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	button.btn2 {
		font-size: .8rem;
		width: 8rem;
		height: 2.25rem;
	}
	
	h1.title {
		font-size: 3rem;
	}
	
	h1.title span {
		font-size: 2.25rem;
	}
	
	h2.title {
		font-size: 1.8rem;
		width: 100%;
		margin: 0;
		margin-bottom: 1rem;
		
	}
	
	section.intro, section.services {
		padding: .5rem 1rem .25rem 1rem;
	}
	
	body.dark .services h1.title, body.dark .aboutus h1.title, body.dark .contactus h1.title, body.dark .quoterequest h1.title {
		margin-bottom: 1.5rem;
	}
	
	
	body.dark .services h1.title::after, body.dark .aboutus h1.title::after, body.dark .contactus h1.title::after, body.dark .quoterequest h1.title::after {
		bottom: -10px;
	}
	
	.intro .container, .services .container, .instypes .container, .aboutus .container, .contactus .container, .quoterequest .container {
		width: 100%;
		margin: 0;
		padding: .5rem 1rem;
	}
	
	.quoterequest .container .calltoaction {
		width: 100%;
	}
	
	
	.aboutus .container p, .contactus .container p {
		width: 100%;
	}
	
	.contactus .container p {
		margin: 0;
		padding-bottom: 0;
	}
	
	.contactus form, .quoterequest form {
		width: 100%;
	}
	
	.contactus .input-container, .quoterequest form .input-container  {
		flex-wrap: wrap;
		gap: 2vh;
	}
	
	#name, #phone, #email {
		width: 100%;
		max-width: 100%;
	}
	
	#regarding {
		width: 75%;
	}
	
	#address {
		width: 62%;
	}
	
	.cityzip {
		width: 100%;
	}
	
	#city {
		width: 62%;
	}
	
	#zip {
		width: 22%;
	}
	
	#inscatslctns {
		display: flex;
		flex-flow: row wrap;
		padding: 0;
	}
	
	#adtnlinfo {
		height: 15vh;
	}
	
	body.dark .quoterequest label {
		max-height: 3rem;
	}
	
	body.dark .quoterequest label:has(.drivers) {
		max-height: 4rem;
	}
	
	.auto-inputcntnr {
		margin-bottom: .5rem;
	}
	.auto-inputcntnr .automake {
		width: 5rem;
	}
	
	.auto-inputcntnr .automodel {
		width: 6rem;
	}
	
	.auto-inputcntnr .drivers {
		width: 62vw;
		height: 4rem;
		margin: .5rem 0rem 1.5rem 4.65rem;
	}
	
	#coveragelbl {
		margin: .5rem 0rem 1rem 5rem;
		padding-top:.5rem;
	}
	
	.ourteam .container {
		width: 100%;
		padding: 0em 1.5em;
	}
	
	.contactus .formmsgbox, .quoterequest .formmsgbox {
		height: 2em;
	}
	
	.contactus .formwrap, .quoterequest .formwrap {
		width: 100%;
		margin: 0;
		flex-flow: column;
		align-items: center;
		gap: 2rem;
	}
	
	.contactus .text {
		min-width: 100%;
	}
	
	.contactus .text .info {
		align-items: center;
	}
	
	#othercntct {
		margin-left: 0;
	}
	
	.contactus .text .info p {
		padding-left: 2rem;
	}
	
	body.dark .ourteam .card {
		width: 100%;
		min-height: 15em;
	}
	
	.intro .container p {
		width: 100%;
		font-size: 1.1rem;
		margin: 0;
	}
	
	.services .calltoaction {
		width: 100%;
	}
	
	.instypes .container {
		flex-direction: column-reverse;
		gap: 0rem;
	}
	
	#homeins, #commins, #recins {
		flex-direction: column;
		min-height: 10rem;
		gap: 0rem;
	}
	
	#lifeins {
		min-height: 20em;
	}
	
	.instypes .container .my-image {
		width: 100%;
		min-height: 8em;
	}
	
	#autobox {
		background-position: center bottom;
	}
	
	#homebox {
		background-size: 100%;
		background-position: 0px -50px;
	}
	
	#lifebox, #recbox {
		background-size: 65%;
		background-position: center;
	}
	
	#commbox {
		background-size: 100%;
		background-position: 0px 0px;
	}
	
	.instypes .container .text h1.title {
		font-size: 2em;
	}
	
	section.accessibility {
		padding: 0;
		background-image: url("../img/pgs/lines2.webp");
		background-size: 115%;
		background-position: bottom right;
		background-repeat: no-repeat;
	}
	
	section.coreprince {
		padding: 0;
		background-image: url("../img/pgs/lines-bare-cell.webp");
		background-size: contain;
		background-position: bottom right;
		background-repeat: no-repeat;
	}
	
	.accessibility .container, .coreprince .container {
		width: 100%;
		height: 50%;
		align-items: flex-start;
		justify-content: flex-start;
	}
	
	.accessibility .container .text, .coreprince .container .text, .instypes .container .text {
		width: 100%;
		padding: 0rem 1rem;
	}
	
	.instypes .container .text {
		padding: 0;
	}
	
	.accessibility .text ul, .coreprince .text ul {
		margin: .5rem 1.5rem;
		list-style-type: none;
	}
	
	.instypes .container .text ul {
		margin: .5rem 0rem .5rem 1rem;
	}
	
	.coreprince .text ul li {
		margin-bottom: .25rem;
	}
	
	p span {
		font-size: 1.125rem;
	}
	
	p {
		font-size: 1.1rem;
	}
	
	.takeaways .container {
		width: 100%;
		padding:0rem 1rem;
	}
	
	.takeaways .splitheading {
		flex-direction: column;
		align-items: center;
		margin: 0rem 0rem 1.5rem 0rem;
		gap: .5rem;
	}
	
	.splitheading h1.title {
		font-size: 1.8rem;
		width: 100%;
		height: 4rem;
		margin: 0;
		margin-bottom: 1rem;
	}
	
	.splitheading .description {
		padding: 1rem .5rem .5rem .5rem;
		font-size: 1.25rem;
		border-left: none;
		border-top: 2pt solid #999;
	}
	
	.takeaways .card {
		width: 100%;
		flex: none;
	}
	
	section.community {
		padding: 1rem 0rem;
	}
	
	.community h1.title {
		width: 100%;
		font-size: 2rem;
		padding: 0rem 1rem;
	}
	
	.community h1.title::after {
		left: 30%;
	}
	
	.community h2.title {
		width: 100%;
		font-size: 1.7rem;
		padding: 0rem 1rem;
		letter-spacing: 0;
	}
	
	.community .container {
		width: 100%;
		padding: 0 1rem;
		flex-direction: column-reverse;
		gap: 1rem;
	}
	
	.community .container .my-image {
		width: 100%;
		height: 35vh;
		min-height: 3rem;
		background-size: 100%;
	}
	
	.community .container .text {
		width: 100%;
	}
	
	.community .container .text h4.title {
		color: #ee2e24;
	}
	
	section.lablog .container {
		width: 100%;
		margin: 0;
		padding: 0rem 1rem;
		justify-content: center;
	}
	
	.lablog .cardbox {
		width: 100%;
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}
	
	.lablog .card {
		width: 100%;
		flex: none;
	}
	
	.socnetbx {
		width: 6em;
		height: 2em;
		top: 32%;
		right: 2%;
		z-index: 5;
	}
	
	.socneticon {
		width: 1.5em;
		height: 1.5em;
	}
	
	.socneticon img {
		width: 1em;
	}
	
	#aboutushdr .socnetbx, #contacthdr .socnetbx, #rfqhdr .socnetbx {
		top: 80%;
	}
	
}

/* About Section */

@media screen and (max-width: 950px) {
	.about .image {
		width: 100%;
		margin-bottom: 40px;
	}

	.about .image img {
		width: 100%;
	}

	.about .text {
		width: 100%;
	}
}

/* Service Section */

@media screen and (max-width: 800px) {
	.service .card {
		width: 100%;
	}
}

/* Portfolio Section */

@media screen and (max-width: 750px) {
	.portfolio .card img {
		width: 38vw;
	}
}

@media screen and (max-width: 500px) {
	.portfolio .card img {
		width: 100%;
	}
}

@media screen and (max-width: 600px) {
	.counter-container {
		height: 80vh;
	}

	.counter-container .card {
		width: 50%;
	}
}

/* Resume Section */

@media screen and (max-width: 1000px) {
	.resume .section {
		width: 100%;
	}
}

/* Testimonial Section */

@media screen and (max-width: 1000px) {
	.testimonial .card {
		width: 100%;
	}

	.testimonial .card .image {
		width: 20vw;
	}
}

/* Blog Section */

@media screen and (max-width: 850px) {
	.blog .card {
		width: 100%;
		margin-bottom: 20px;
	}

	.blog .card .image img {
		width: 100%;
	}

	.blog .card .text .date {
		font-size: 14px;
	}

	.blog .card .text .heading {
		font-size: 24px;
	}

	.blog .card .text .read {
		font-size: 18px;
	}
} 

/* Contact Section */

@media screen and (max-width: 1200px) {
	.contact .text {
		margin: 0;
	}
	
}

@media screen and (max-width: 1050px) {
	.contact form {
		width: 100%;
		margin-bottom: 40px;
	}
}

@media screen and (max-width: 600px) {
	.contact #name,
	.contact #email {
		width: 100%;
	}
}