/* ===== RESET ===== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== GLOBAL ===== */

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;

  
}


/* ===== MEDIA ===== */

img {
    display: block;
    max-width: 100%;
    height: auto;
}

picture {
    display: block;
}

/* ===== LINKS ===== */

a {
    text-decoration: none;
    color: inherit;
}


/* ===== BUTTONS ===== */

button {
    font: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* ===== FORM ELEMENTS ===== */

input,
textarea,
select,
button {
    font: inherit;
}



/*---------------Navigation-Section-------------------*/
.desktop-phone {
    display: none;
}

/* Hero Section*/
.hero-div {
    width: min(100% - 2rem, 1200px);
    margin-inline: auto;
    padding-top: 2em;
    padding-bottom: 1.8em;
}

.hero-div h1 {
 text-align: left; 
 padding-top: 0.5em;
 padding-bottom: 0.5em;
 font-family: Urbanist, Verdana;
 font-weight: 700;
 font-size: 40px;
 line-height: 1.2em;
 margin-left: 0.5em;
}

.red-text { 
  color: red;
}

.hero-div p {
  text-align: left;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 18px;
  color: #242424;
  line-height: 1.8em;
  padding-bottom: 1em;
  margin-left: 1em;
}


.hero-cta {
  background-color: #0070D1;
  padding: 12px;
  color: white;
  width: 100%;
  border-radius: 30px;
  margin-top: 16px;
  font-family: Verdana;
  font-weight: 700;
  display: flex;              /* CRITICAL */
  align-items: center;        /* CRITICAL */
  justify-content: center;
}

.hero-cta:hover {
  background-color: #0065bd;
}

.hero-cta::before {
  content: "";
  width: 25px;
  height: 25px;
  display: inline-block;
  padding-right: 10px;


 

  background-color: white;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 011 1V20a1 1 0 01-1 1C10.61 21 3 13.39 3 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.58a1 1 0 01-.25 1.01l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat center;

  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 011 1V20a1 1 0 01-1 1C10.61 21 3 13.39 3 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.58a1 1 0 01-.25 1.01l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat center;

  -webkit-mask-size: contain;
  mask-size: contain;
}

.hero-image img {
  padding-top: 2em;
  padding-bottom: 0;
  margin-bottom: 0;
  width: 300px;
  display: block;
  margin-inline: auto;
}

.hero-image-line {
  width: 100%;
  margin: 0;
}


/* Intro Section */
.intro-section { 
  margin-bottom: 4em;
}
.intro-header {
  font-family: Urbanist, Verdana;
  font-size: 20px;
  font-weight: 700;
  padding-bottom: 3em;
  padding-top: 3em;
  text-align: center;
}

.intro-div,
.middle-section,
.last-section {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
  border: 2px solid gray;
  border-radius: 5px;
  padding: 2em 1.5em;
  margin-bottom: 1.5em;
}

.intro-div h2,
.middle-section h2,
.last-section h2 {
  font-family: Tahoma, Sans-Serif;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  color: black;
  padding-bottom: 1em;
}

last-section p {
  text-align: center;
}

.middle-section p,
.last-section p {
  line-height: 2em;
  
}

.intro-div ol {
  padding-left: 1.5em;
  line-height: 2em;
}

.trusted-word {
  color: red;
}

/*-------------------------- Towing Services Section ------------------------------------*/
.towing-services-container {
  max-width: 1200px;
  margin: 0 auto;
}

.tow-truck-icon {
  display: block;
  margin: 0 auto;
  padding-bottom: 1em;
}

.towing-services-section {
  background-color: #f5f2f2;
}

.towing-services-div {
  padding-top: 2em;
}

.towing-services-section h2 {
  font-family: Urbanist, Verdana;
  font-size: 25px;
  padding-top: 1em;  
  padding-bottom: 15px;
  text-align: center;
  max-width: 300px;
  margin: 0 auto;    
    
}

.towing-services-div p {
  max-width: 300px;
  margin: 0 auto;
}

.towing-services-section p {
  padding-bottom: 15px; 
}

.towing-services-div ul {
  margin: 0 auto;
  width: fit-content;
  transform: translateX(-30px); 
  padding-top: 1em;  
  padding-bottom: 3em;  
}

.towing-services-div li {
  display: flex;
  gap: 10px;
  line-height: 1.8em;
}

.call_for_tow {
    max-width: 300px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 3em;
}

.check-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.car-help-icon{
  display: block;
  margin: 0 auto;
  padding-top: 2em;
  padding-bottom: 1em;
}

/*-----------------------------Areas We Serve Section-----------------------------*/
.areas-we-serve-title h2 {
  font-family: Urbanist, Verdana;
  font-size: 25px;
  text-align: center;  
  padding-top: 2em;
}

.location-icon { 
  display: block;
  margin: 0 auto;
  padding-top: 2em;
  padding-bottom: 1em;
}
.areas-we-serve-section {
  background-color: #f5f2f2;
}
.areas-we-serve-div {
  text-align: center;
  
}

.areas-we-serve-div h2 {
  font-family: Urbanist, Sans-Serif;
  font-size: 20px;
  padding-bottom: 3em;
  text-align: center;
}

.areas-we-serve-div h3 {
  color: red;
  padding-bottom: 10px;
  padding-top: 2em;  
}


.areas-we-serve-div ul{
  width: fit-content;
  margin: 0 auto;
  padding-left: 0;
}


.areas-we-serve-div li {
  text-align: left;
}

.view-all {
  padding-top: 2em;
  padding-bottom: 3em;
  text-align: center;
  text-decoration: underline;
}

/*-----------------------------Trust Section------------------------------- */
.trust-div {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}

.trust-section { 
    background-color: white;
}

.trust-section { 
    margin-inline: auto;
    padding-bottom: 3em;
}

.trust-section h2 {
  font-family: Verdana, Sans-Serif;
  font-size: 20px;
  padding-top: 2em;
  padding-bottom: 1em;
  text-align: center;
}

.google-trust { 
  text-align: center;
}

.google-trust h3 {
  padding-bottom: 0.5em;
  font-family: Verdana, sans-serif;
  font-size: 17px;
  text-align: center;
}

.google-trust img { 
  width: 90px;
  height: 90px;
  margin: 0 auto;
}

.google-review {
  align-items: center;
}


  /* ================= FOOTER ================= */
.footer { 
  padding-top: 2em;
}

.row-one ul {
  flex-direction: column;
  align-items: center;
  gap: 1em;
}

.row-one ul li {
  text-align: center;
  margin-bottom: 10px;
  font-family: Verdana;
  font-size: 14px;
}

.row-two {
  margin-top: 2em;
  padding: 0 10px;
}

.row-two p {
  font-size: 12px;
  text-align: center;
  line-height: 1.4;
}

/* ================= CALL CTA ================= */

.bottom-border-cta {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #d40000;
  padding: 14px 20px;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
  box-sizing: border-box;
  color: white;
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}


.mobile-call-cta .material-symbols-outlined {
  font-size: 35px !important;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

  body {
   padding-bottom: 80px;
  }


/* ====================================================== DESKTOP ====================================================================== */

@media (min-width: 1024px) {
/*---------------Navigation-Section--------------------------*/
.nav-div {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.desktop-phone {
  display: block;
}
    
.phone-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #d40000;
}

.phone-subtext {
  font-weight: 200;
}

/*-----------------------------------------------------------Hero-Section----------------------------------------------------------------*/
  .hero-div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3em;
    gap: 60px;
  }

  .hero-content {
    flex: 1;
  }

  .hero-image {
    flex: 1;
  }


.hero-div h1 {
  text-align: left;
}

.hero-div p {
  text-align: left;

}

.hero-div br {
  display: none;
}


.hero-cta {
    width: 280px;
    padding: 16px 24px;
    margin-left: 1em;
  }

/*--------------------------------------------------------------Intro-Section--------------------------------------------------------------*/

.intro-header {
  font-size: 25px;
}

.intro-section-div { 
  display: flex;
  margin-left: 10em;
  margin-right: 10em;
  gap: 10px;
}


.last-section p {
  text-align: left;
}
    
/*--------------------------------------------------------Towing Services Section------------------------------------------------------------*/
    
.towing-services-section {
  padding-top: 1em;
}

.towing-services-container {
  width: min(100% - 2rem, 1100px);
  margin-inline: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.towing-services-div {
  flex: 1;
}

.towing-services-image {
  flex: 1;
  padding-top: 2em;  
}

.towing-services-div h2 {
  text-align: left;
  max-width: none;
  margin: 0 0 15px 0;
  font-size: 35px; 
  line-height: 1.5em; 
    
}

.towing-services-div p {
  max-width: 600px;
  margin: 0 0 20px 0;
}

.towing-services-div ul {
  width: fit-content;
  margin: 0;
  transform: none;
  padding-top: 1em;
  padding-left: 0;
}

.call_for_tow {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}


/*-----------------------------_Areas we Serve------------------------------*/
  
  .areas-we-serve-div {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;  /* Centers the element horizontally by applying equal left and right auto margins */

    display: flex;
    justify-content: space-between;   /* Pushes items to the far left and right edges with equal space between them */
    align-items: flex-start; /* Aligns items to the top of the container */
    gap: 20px;
    text-align: left;
  }

  .areas-we-serve-div > div {
    flex: 1; /* Makes each child div take equal available space in the flex row (creates equal-width columns) */
}
    
/*Trust Section*/
.google-trust img { 
  width: 90px;
  height: 90px;
  margin: 0 auto;
}    
    
/* Footer*/
.row-one ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .row-one ul li {
    margin-bottom: 0; /* removes mobile spacing */
    text-align: center;
  }   
    
/* Bottom Border CTA*/    
.bottom-border-cta {
    display: none;
}    










  
  }