html,
body {
  /* Font */ font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  /* Layout */ height: 100%; margin: 0; padding: 0; overflow: hidden; box-sizing: border-box; overflow-x: hidden; overflow-y: auto;
}

/* === UNIVERSAL STYLES === */

/* Universal font sizes */
h1 { font-size: clamp(7.5rem, 5vw, 20rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 3rem); }
h3 { font-size: clamp(1.25rem, 3vw, 2.5rem); }
p { font-size: clamp(1.1rem, 2vw, 2rem); line-height: 2; }

/* Universal row and column display */
.row { display: flex; flex-direction: row; gap: 4rem; }
.column { display: flex; flex-direction: column; }

.row i { gap: 2rem; }

/* Scroll container */
  .scroll-container { height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; scroll-behavior: smooth; }

  /* Each section and footer gets a full-screen snap
   Allows content inside to scroll if it overflows*/
  .scroll-container > section,
  .scroll-container > footer { scroll-snap-align: start; height: 100vh; overflow: auto; }
/**/

/* === LOADER OVERLAY === */
/* Full-page overlay */
#loader {
  /* Background */ background: white;
  /* Layout */ width: 100%; height: 100%;
  /* Position */ display: flex; position: fixed; top: 0; left: 0; justify-content: center; align-items: center; z-index: 9999; /* stays above everything */
}

/* Circular spinner */
.spinner {
  /* Layout */ width: 3.75rem; height: 3.75rem; border: 6px solid #e0f2f1; border-top: 6px solid teal; border-radius: 50%;
  /* Visuals */ animation: spin 1s linear infinite;
}

/* Animation */
  /* Spinning animation */
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
/* Fade-in effect */
.fade-in {
	animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
      opacity: 100;
    }
  }

/* Fade-out effect */
.fade-out {
	animation: fadeOut 0.5s ease forwards;
}

  @keyframes fadeOut {
    to {
      opacity: 0; visibility: hidden;
    }
  }
/**/

/* === HEADER === */

/* Header styling */
  .header {
    /* Font */ color: white; font-weight: bold;
    /* Layout */ width: 100%; max-width: 100%; box-sizing: border-box; padding: 1rem 4rem;
    /* Background */ background-color: #00a0a4;
    /* Positioning */ display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; overflow: hidden; position: fixed; top: 0; left: 0; gap: 1rem; z-index: 999;
    /* Visuals */ transition: background-color 0.3s ease, color 0.3s ease;
  }
  .header-left,
  .header-center,
  .header-right {
    flex: 0 0 auto; align-items: center; display: flex;
  }
  .header-left,
  .header-center {
    justify-content: flex-start;
  }
  .header-right {
    /* Layout */ margin-left: auto;
    /* Display */ display: flex; justify-content: flex-end; align-items: center; gap: 1rem;
  }
  /* Logo (text) styling */
  .logo { font-size: clamp(1rem, 2.5vw, 1.5rem); letter-spacing: 0.02rem; }
  /* Containers */
  .link-groups,
  .auth-links { display: flex; gap: 1rem; }
  .auth-links { 
    /* Font */ color: white;
    /* Layout */ margin-right: 1rem;
    /* Positioning */ align-items: center;
  }

  /* Base styles for all links in [link-groups] and [auth-links] */
  .link-groups a,
  .auth-links a {
    /* Font */ font-size: clamp(0.75rem, 2vw, 1.5rem); color: white; text-decoration: none;
    /* Layout */ padding: 0.5rem 1.5rem; border-radius: 625rem;
    /* Visuals */ transition: all 0.3s ease;
  }
  /* Hover effect for both link types */
  .link-groups a:hover,
  .auth-links a:hover {
    /* Font */ color: #00a0a4;
    /* Layout */ border: 1px solid white;
    /* Background */ background-color: aliceblue;
  }
  /* Active state specific to link-groups */
  .link-groups .active,
  .link-pay {
    /* Layout */ border: 1px solid #7cbfc8;
    /* Background */ background-color: #7cbfc8;
  }
 
  .auth-links a i { margin-left: 0.5rem; }
  
  /* Targeting the TZ flag in the header */
  #flagTZ { max-height: 24px; margin-right: 0.5rem; }
  
  .dropcode-btn { 
	/* Font */ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size: clamp(1rem, 2.5vw, 1.5rem); color: white; font-weight: bold;
	/* Layout */ padding: 0.5rem 1.5rem; border: none; border-radius: 625rem; background-color: #7cbfc8; margin-top: 5rem; max-width: 20rem;
	/* Display */ cursor: hover; transition: all 0.3s ease;
  }
  .dropcode-btn:hover { background-color: white; color: #00a0a4; }

  .dropcode-card { 
	/* Layout */ position: fixed; bottom: 3rem; left: 3rem; width: 280px; background: white; border-radius: 2rem; padding: 0.5rem 1.5rem; border: 1px solid black; box-shadow: black 7.5px 7.5px; gap: 0; align-items: center; justify-content: center;
	/* Display */ z-index: 2000; transform: translateX(-200%);
  }
  .dropcode-card button {
		/* Font */ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size: clamp(1rem, 2vw, 2rem); font-weight: bold;
		/* Background */ border: none;
		/* Layout */ padding: 0.5rem 1.5rem; border-radius: 625rem; box-shadow: black 5px 5px; width: 100%;
		/* Visuals */ transition: all 0.3s ease; cursor: hover;
	}
	.dropcode-card button:hover { background-color: lightgrey; }
  #dropCode { font-size: 3rem; font-weight: bold; }
  #closeDropcodeCard { margin-bottom: 2rem; }
  
  @keyframes dropcodeSlideOut {
	  from {
		  transform: translateX(0);
	  }
	  to {
		  transform: translateX(-200%);
	  }
  }
  @keyframes dropcodeSlideIn {
	  from {
		  transform: translateX(-200%);
	  }
	  to {
		  transform: translateX(0);
	  }
  }
  .dropcode-slide-out { animation: dropcodeSlideOut 0.4s ease-out forwards; }
  .dropcode-slide-in { animation: dropcodeSlideIn 0.4s ease-out forwards; }
/**/


/* === HERO SECTION === */

/* Quick link styles used in the hero section */
  .quick-links {
    /* Font */ font-size: clamp(1rem, 2.5vw, 2rem);
    /* Display */display: flex; flex-direction: row; align-items: center; justify-content: center; margin-top: 4rem; gap: 2rem;
  }
  .quick-links a {
    /* Font */ color: white; text-decoration: none;
    /* Display */ display: inline-flex; align-items: center; gap: 1rem;
  }
  .quick-links i:hover { /* Visuals */ transition: all 0.5s ease; transform: translateY(-10px) rotate(-15deg); }
/**/

/* === HERO SECTION === */
/* Hero section and container */
  .hero {
    /* Layout */ padding: 4rem 4rem; min-height: 80vh;
    /* Background */ background-color: #00a0a4;
    /* Display */ display: flex; justify-content: center; align-items: flex-start;
  }
  .hero-container {
    /* Font */ color: white; text-align: left;
    /* Layout */ margin-top: 8rem; align-items: left;
  }
  .hero h1 {
  font-size: clamp(3rem, 2vw, 20rem);
  margin: 0 auto;
  margin-bottom: 6rem;
}
.hero-container a { 
	/* Font */ color: white; text-decoration: none; font-size: clamp(1.5rem, 3.5vw, 3rem);
	/* Layout */ padding: 0;
	/* Display */ transition: all 0.3s ease; cursor: hover;
}
.hero-container a:hover { /* Font */ color: #7cbfc8; }
.hero-container a i { margin-left: 0.5rem; }


  /* Link hover effects */
    /* Base hover effect for hero link icons */
    .hero a i {
      /* Visuals */ transition: all 0.5s ease; transform: translateY(0);
    }
    /* Rotation for specific links */
    #rocket-link:hover i { --rotate-angle: -20deg; }
    #credit-card-link:hover i { --rotate-angle: -15deg; }
    #location-link:hover i { --rotate-angle: 0deg; }
    /* Apply transform using variable */
    .hero a:hover i { /* Visuals */ transform: translateY(-10px) rotate(var(--rotate-angle)); }
  /**/
  
  /* Popup card styling */
	.popup-card { 
		/* Layout */ right: 3rem; bottom: -100%;
		/* Display */ display: none; position: fixed;
		/* Visuals */ transform: translateX(-20%);
	}
	
	.popup-card img { max-height: 30rem; width: auto; }
	.popup-card .message { 
		/* Font */ font-size: clamp(1rem, 2vw, 2rem);
		/* Background */ background-color: white; 
		/* Layout */ max-height: 10rem; padding: 0.5rem 1.5rem; border: 1px solid black; border-radius: 2rem; box-shadow: black 7.5px 7.5px;
		/* Display */ display: flex; flex-direction: row; position: relative; }
	.popup-card .message p { color: #00a0a4; font-weight: bold; }
	.popup-card button {
		/* Font */ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size: clamp(1rem, 2vw, 2rem); font-weight: bold;
		/* Background */ border: none;
		/* Layout */ padding: 0.5rem 1.5rem; border-radius: 625rem; box-shadow: black 5px 5px;
		/* Visuals */ transition: all 0.3s ease; cursor: hover;
	}
	#popupYes { background-color: #00a0a4; color: white; }
	#popupYes:hover { background-color: #7cbfc8; }
	#popupNo:hover { background-color: lightgrey; }
  /**/
  
  #lang { display: flex; flex-direction: column; }

/**/

/* === ABOUT US SECTION === */
.about-us {
  /* Layout */ padding: 4rem 2rem; margin: 0;
  /* Background */ background-color: white;
  /* Positioning */ display: flex; justify-content: space-between; align-items: center; gap: 0rem;
}

/* Flex children shared rules */
.about-us-container,
.about-us-stats,
.our-services-container,
.our-services-details {
  flex: 1; /* allow both to grow/shrink equally */
  max-width: 50%; /* cap at half the width */
  box-sizing: border-box;
}

/* Text / Link styling */
  .about-us-container a {
    /* Text */ color: #bbb; text-decoration: none; font-size: clamp(1.1rem, 2vw, 2rem);
    /* Layout */ margin-top: 0rem;
    /* Visuals */ transition: all 0.3s ease;
  }
  .about-us-container a:hover {
    /* Text */ color: #00a0a4;
    /* Visuals */ cursor: hover;
  }
  .about-us-stats {
    /* Text */ text-align: right;
    /* Positioning */ align-items: center;
  }
  .about-us-stats-mobile { display: none; }

  /* Slogans / Highlight text */
  .slogan,
  .highlight {
    /* Font */ color: #00a0a4;  font-weight: bold;
    /* Layout */ gap: 1rem;
  }
  .slogan { font-size: clamp(1rem, 2.5vw, 1.5rem); }
  .highlight { font-size: clamp(1.5rem, 3.5vw, 3rem); }
/**/


/* === OUR SERVICES SECTION === */
.our-services {
  /* Layout */ padding: 4rem 2rem;
  /* Background */ background-color: white; gap: 2rem;
  /* Display */ display: flex; justify-content: space-between; align-items: center;
}

/* Pricing grid */
  .pricing-grid-container { border: 1px solid black; border-radius: 2rem; padding: 1rem 3rem; max-width: 30rem; box-shadow: black 10px 10px;}
  .pricing-grid {
	/* Font */ font-size: clamp(1.1rem, 2vw, 2rem);
    /* Layout */ max-width: 25rem; 
    /* Background */ background: white;
    /* Positioning */ display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
  }
  .pricing-grid-header { font-weight: bold; }
/**/

#getanestimate { margin-left: 0.5rem; }

/* === CONTACT US SECTION === */
.contact-us {
  /* Layout */ padding: 4rem 2rem;
  /* Background */ background-color: white;
  /* Positioning */ display: flex; flex-direction: column; align-items: center;
}
.contact-us h2 { margin-top: 4rem; }

.contact-us-card .row {
  /* Layout */ gap: 1rem; width: 100%;
  /* Positioning */ display: flex; align-items: center;
}

/* Styling the contact card */
.contact-us-card {
  /* Layout */ border: 1px solid #ccc; padding: 1rem; border-radius: 0.5rem; min-width: 20rem;
  /* Background */ background-color: white;
  /* Positioning */ display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
}

/* Default grid: 2 columns x 2 rows for desktop */
#contact-grid-a {
  /* Layout */ display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 0 auto;
}

/* Styling elements within the contact card */
  .contact-us-card .row { align-items: center; }
  
  /* icons */
  .contact-us-card i {
    /* Font */ font-size: clamp(2rem, 5vw, 4rem); color: #bbb;
    /* Layout */ margin-left: 1rem;
    /* Display */ display: flex; justify-content: center; align-items: center; text-align: center;
  }

  /* Text */
  .card-text {
    /* Layout */ margin: 0; margin-left: 1.5rem; padding: 0; gap: 0.3rem;
    /* Display */ display: flex; flex-direction: column;
  }
  .card-text h3, .card-text p, .card-text a {
    /* Font */ font-family: inherit; font-size: clamp(0.9rem, 2vw, 1.2rem); line-height: normal;
    /* Layout */ margin: 0; padding: 0;
  }
  .card-text a {
    /* Font */ text-decoration: none; font-size: clamp(0.9rem, 2vw, 1.2rem); color: #bbb;
    /* Layout */ margin: 0; margin-top: 1rem;
    /* Vision */ transition: all 0.3s ease;
  }
  .card-text a:hover {
    color: #00a0a4;
  }
  .card-text i { font-size: clamp(0.9rem, 2vw, 1.2rem); }
/**/

/* === SUPPORT SECTION === */
/* Support section container */

.hot-links { display: flex; flex-direction: row; margin-top: 2rem;}
.hot-links a { color: white; text-decoration: none; font-weight: bold; }

/* Individual social buttons */
  .social-btn {
    /* Font */ font-size: clamp(1.5rem, 3.5vw, 2.5rem); text-decoration: none; color: white;
    /* Layout */ width: 2rem; height: 2rem; margin-bottom: 1rem;
    /* Display */ display: flex; align-items: center; justify-content: center;
    /* Visuals */ transition: all 0.2s ease;
  }

  .social-btn:hover {
    /* Font */ color: aliceblue; 
    /* Visuals */ transform: scale(1.2);
  }
/**/

/* Decorative line under subheadings */
.line {
  /* Layout */ width: 80%; height: 2px; margin: 0; margin-bottom: 1rem;
  /* Background */ background-color: white;
}

.strike {
  text-decoration: line-through;
  text-decoration-color: rgba(255, 99, 132, 0.75); /* soft reddish-pink with 40% opacity */
  text-decoration-thickness: 20px;
  text-decoration-style: solid;
}

/* Row inside support section */
#support-row { margin-top: 2rem; }
/* Headings */
#support-row h2 { color: white; }
/* Quick links / anchor tags */
#support-row a {
  /* Font */ color: white; text-decoration: none; font-size: clamp(1rem, 2vw, 1.5rem); font-weight: normal;
  /* Layout */ margin: 0; margin-bottom: 1rem;
  /* Visuals */ transition: all 0.3s ease;
}

/* === FEEDBACK FORM === */
.feedback {
  /* Layout */ padding: 4rem 2rem; margin: 0; overflow-y: auto; overflow-x: hidden;
  /* Background */ background-color: white;
  /* Positioning */ display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 2rem;
}
.feedback-container { margin-top: 2rem; width: 100%; box-sizing: border-box; position: relative; }
.feedback-row { display: flex; gap: 1rem; margin-bottom: 1rem; max-width: 100%;}

.feedback-container a {
  /* Text */ color: #00a0a4; text-decoration: none;
  /* Layout */ margin-top: 0rem;
  /* Visuals */ transition: all 0.3s ease; cursor: hover;
}
.feedback-container a:hover {
  /* Text */ color: #7cbfc8;
}

#feedback-form input,
#feedback-form select {
  /* Font */ font-size: clamp(1rem, 2.5vw, 1.2rem); font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; color: grey;
  /* Layout */ padding: clamp(0.6rem, 1vw, 1rem) clamp(1rem, 1.5vw, 1.2rem); border: 1px solid #ccc; border-radius: 1rem;
}
#feedback-form input:focus,
textarea:focus {
  /* Layout */ border-color: #00a0a4; outline: none; box-shadow: 0 0 4px rgba(0, 123, 255, 0.2);
}
#marketing { font-size: clamp(1rem, 2.5vw, 1.2rem); cursor: pointer; }

.phone-input { display: flex; align-items: center; max-width: 100%; gap: 0.5rem; }
.phone-input img { display: flex; border-radius: 0.75rem; }
.phone-input .prefix {
  /* Font */ font-weight: normal; color: #bbb;
  /* Display */ display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
  /* Visuals */ pointer-events: none;
}
.phone-input input { flex: 1; padding-left: 0.5rem; max-width: 15rem; box-sizing: border-box; }
.feedback-row.phone-row { max-width: 65%; margin: 0 auto; }

#email { width: 17rem; }

textarea[name="message"] {
  /* Font */ font-size: clamp(1rem, 2.5vw, 1.2rem); font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; color: grey;
  /* Layout */ width: 100%; max-width: clamp(30rem, 50%, 40rem); padding: clamp(0.6rem, 1vw, 1.25rem) clamp(1rem, 1.5vw, 1.5rem); border: 1px solid #ccc; border-radius: 1rem; resize: none; box-sizing: border-box;
}

.btn {
  /* Font */ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; color: white; font-size: clamp(1rem, 2.5vw, 1.2rem);
  /* Background */ background-color: #7cbfc8;
  /* Layout */ border: none; border-radius: 1rem; padding: clamp(0.75rem, 1vw, 1.5rem) clamp(1.2rem, 1.5vw, 2rem); margin-top: 2rem;
  /* Visuals */ cursor: pointer; transition: all 0.5s ease; transform: translateY(0); 
}
.btn i { display: inline-block; transition: all 0.5s ease; }
.btn:hover { background: #007b7e; }
.btn:hover i { transform: translateY(-10px) rotate(-10deg); }

/* === NOTIFICATION CARD === */
.notification-card {
  /* Font */ font-size: 0.9rem;
  /* Layout */ padding: 0.5rem 0.75rem; border-radius: 0.5rem; 
  /* Background */ background: white; gap: 1rem;
  /* Display */ display: flex; flex-direction: row; position: fixed; top: -100px; right: 1.5rem; z-index: 9999; opacity: 0; /* invisible by default */ box-shadow: 0 4px 10px rgba(0,0,0,0.1); align-items: right;
  /* Visuals */ transition: all 0.4s ease; /* smooth slide + fade */
}
.notification-card.show { top: 1.5rem; /* visible position */ opacity: 1; /* fade in */ }
.notification-card i { color: white; }
.icon-circle {
  /* Layout */ width: 1rem; height: 1rem; padding: 0.1rem; border-radius: 50%;
  /* Background */ background: #ff4d4f;
  /* Display */ display: flex; align-items: center; justify-content: center;
}

/* Success state */
.notification-card.success .icon-circle { background: #52c41a; /* green */ }
.notification-card.success .icon-circle i { font-family: "Font Awesome 6 Free"; font-weight: 900; }
.notification-card.success .icon-circle i::before { content: "\f00c"; /* FontAwesome check (fa-check) */ }

/* === BACK TO TOP BUTTON === */
#back-to-top {
  /* Font */ font-size: clamp(1rem, 2.5vw + 1.5rem, 1.5rem); color: white;
  /* Background */ background-color: #00a0a4;
  /* Layout */ width: clamp(2rem, 2.5vw + 1.5rem, 3rem); height: clamp(2rem, 2.5vw + 1.5rem, 3rem); border: none; border-radius: 50%; padding: clamp(1rem, 2.5vw + 1rem, 1.2rem);
  /* Display */ display: flex; position: fixed; bottom: 2rem; right: 2rem; z-index: 1000; align-items: center; justify-content: center;
  /* Visuals */ cursor: pointer; transition: all 0.3s ease;
}

#back-to-top:hover { background-color: #7cbfc8; transform: translateY(-4px); }

#highlight-note-mobile { display: none; }

/* === STYLES USED FOR THE (BUSINESS) LANDING PAGE ONLY === */
	/* Sections (each used to describe a benefit to B2B clients) */
	.business-benefit {
		/* Layout */ padding: 4rem 4rem; gap: 0rem; min-height: 90vh; box-sizing: border-box;
		/* Background */ background-color: white;
		/* Display */ display: flex; flex-direction: column; justify-content: center; align-items: left;
	}
	.business-benefit img { max-height: 100%; max-width: 80%; margin-top: 2rem; }
	
	 .business-benefit a {
		/* Text */ color: #bbb; text-decoration: none; font-size: clamp(1.1rem, 2vw, 2rem);
		/* Layout */ margin-top: 0rem;
		/* Visuals */ transition: all 0.3s ease;
	}
	.business-benefit a:hover {
		/* Text */ color: #00a0a4;
		/* Visuals */ cursor: hover;
	}
	ul li { font-size: clamp(1.1rem, 2vw, 2rem); line-height: 2; }
	ol[type="1"] li { font-size: clamp(1.1rem, 2vw, 2rem); line-height: 2; }

	.term-btn {
		/* Text */ font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; font-size: clamp(1.1rem, 2vw, 2rem); color: #7cbfc8;
		/* Background */ background-color: white;
		/* Layout */ border: none;
		/* Visuals */ cursor: pointer; transition: all 0.5s ease;
	}
	.term-btn:hover { color: #00a0a4; }
	
	
/**/

/* === STYLES BORROWED FROM POLICY.CSS ===*/
	/* Definition card */
	.definition-card {
		/* Layout */ padding: 2rem; box-sizing: border-box; position: fixed; top: 0; left: 0; /* hidden off-screen initially */ width: 100%; height: 100%; box-shadow: none; /* full-screen, so shadow not needed */ overflow-y: auto; overflow-x: hidden; word-wrap: break-word;
		/* Background */ background-color: white; /* slightly transparent if you like */ 
		/* Visuals */  transition: all 0.5s ease; transform: translateX(100%); z-index: 1000;
	}
	.definition-card.open { transform: translateX(0); }
	.definition-close {
		/* Font */ font-size: 2rem;
		/* Background */ background: none;
		/* Layout */ position: absolute; top: 1rem; right: 1rem; border: none;
		/* Display */ cursor: pointer;
	}
	.link-icon { color: #7cbfc8; text-decoration: none; transition: all 0.5s ease; }
	.link-icon:hover { color: #00a0a4; }
	.link-icon i { display: inline-block; transform: rotate(-45deg); margin-left: 0.3rem; }

/**/


@media (max-width: 768px) {
  .link-login, .link-pay { font-weight: bold; }
  
  .header { padding: 1rem 1rem; gap: 0.5rem; }
  .hero-container { 
		/*Layout */ max-width: 90%; align-items: left;
		/* Display */ 
  }
  .hero { padding: 2rem 0; }
  .hero h1 { margin: 0; }
  
  .hero-subtitle { margin-top: 2rem; margin-bottom: 4rem; }
  #link-start,
  #link-business { display: none; }

  .auth-links a { padding: 0.5rem 1.5rem; font-size: clamp(0.75rem, 2vw, 1.5rem); }
  
  /* Hover effect for both link types */
  .auth-links a:hover {
    /* Font */ color: #00a0a4;
    /* Layout */ border: 1px solid white;
    /* Background */ background-color: aliceblue;
  }
  
  .line { margin-bottom: 0; }

  .about-us { flex-direction: column; gap: 0; }
  .about-us-container { margin-top: 2rem; }
  .about-us-stats { display: none; }
  .about-us-container, .about-us-stats, .about-us-stats-mobile { max-width: 100%;  /* take full width */ }
  .about-us-stats-mobile { display: flex; flex-direction: row; align-items: flex-start; gap: 2rem; }
  .get-estimate { display: flex; align-items: flex-start; }
  .header-row { display: flex; flex-direction: column;}
  .overlay { display: flex; flex-direction: column;}
  
  #support-row { display: flex; flex-direction: column; }
  #support-row a { margin-bottom: 0.5rem; }
  #contact-column { margin-top: -2rem; }
  #contact-grid-a { max-width: 100%; overflow-x: hidden; margin: 0;}
  .contact-us-card { min-width: unset; width: 100%; box-sizing: border-box; }

  #location-link { font-size: clamp(0.75rem, 2vw, 1.5rem); }
  #highlight-note-mobile { display: block; }

  .feedback-row { display: flex; flex-direction: column; }
  #email { max-width: 16rem; }
  
  .popup-card { 
	/* Layout */ position: fixed; bottom: 0;
	/* Display */ display: none; align-items: flex-start;
	/* Visuals */ transform: none; z-index: 900; /* just under the back-to-top button */
  }
  .popup-card img { max-height: 15rem; width: auto; }
  
  #liabilityInfoButtons { 
    /* Layout */ gap: 0.5rem; text-align: left;
    /* Display */ display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
  
  .footer-container { margin-top: -2rem; padding: 0; }
  .hot-links { margin-top: -3rem; display: flex; flex-direction: column; gap: 1rem; }
  .footer-links-container { max-width: 80%; }
  .footer-links-column p { margin-bottom: 1rem; }
  .footer-end-row { display: flex; flex-direction: column; gap: 0; align-items: left; text-align: left; justify-content: flex-start; }
  
  .hot-links { flex-direction: column; }
  .hot-links a { font-size: 2rem; }
}

@media (min-width: 769px) {
  .about-us-stats-mobile { display: none; }
}

/* Tablet / smaller screens should stack the contact us cards vertically */
@media (max-width: 1023px) {
	.hero-title { font-size: clamp(7.5rem, 5vw, 12.5rem); }
	
  #contact-grid-a { grid-template-columns: 1fr; gap: 1rem; margin: 0 auto; }
  .contact-us-card { flex-direction: row; justify-content: flex-start; width: 100%; }
  .card-text { margin-left: 2rem; gap: 0.2rem; }
  .card-text h3, .card-text p, .card-text a { font-size: clamp(0.85rem, 1.8vw, 1.1rem); }
  .card-text a { margin-top: 0.5rem; }
  
}

/* Media querries used in the (Business) Landing page */
@media (max-width: 768px) {
	#benefitSubtitle { display: none; }
}