@charset "UTF-8";
/*
0 - 600px:      Phone
600 - 900px:    Tablet portrait
900 - 1200px:   Tablet landscape
[1200 - 1800] is where our normal styles apply
1800px + :      Big desktop

$breakpoint arguement choices:
- phone
- tab-port
- tab-land
- big-desktop

ORDER: Base + typography > general layout + grid > page layout > components

1em = 16px
*/
ul {
  list-style: square;
  margin-left: 2rem;
  line-height: 1.8; }

.text-before-ul {
  font-size: 1.2rem; }

.bold {
  font-size: 1.5rem;
  font-weight: 600;
  color: #bc202e;
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal; }

/*
0 - 600px:      Phone
600 - 900px:    Tablet portrait
900 - 1200px:   Tablet landscape
[1200 - 1800] is where our normal styles apply
1800px + :      Big desktop
1920 + biger desktop 2
$breakpoint arguement choices:
- phone
- tab-port
- tab-land
- big-desktop

ORDER: Base + typography > general layout + grid > page layout > components

1em = 16px
*/
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

a {
  color: inherit;
  /* Matches parent color */
  text-decoration: none;
  /* Optional: removes underline */ }

html, body {
  overflow-x: hidden;
  width: 100%;
  position: relative; }

html {
  font-size: 1rem;
  text-wrap: balance;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-text-size-adjust: none; }

html:focus-within {
  scroll-behavior: smooth; }

body {
  font-family: "Noto Sans", sans-serif;
  font-weight: 400;
  color: #1a2139;
  box-sizing: border-box;
  line-height: 1.4;
  min-height: 100vh;
  text-rendering: optimizeSpeed; }

*, ::after, ::before {
  box-sizing: inherit;
  overflow-wrap: anywhere;
  word-break: break-word; }

h1, h2, h3, h4, h5, h6, h7, h8 {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal; }

p {
  margin-bottom: 1rem;
  line-height: 1.4; }

button {
  margin: 32px 0 0 0; }

.custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  padding: 1rem;
  font-family: "futura-pt", sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  font-size: 1.5rem;
  outline: none; }

.btn-3 {
  background: #bc202e;
  background: linear-gradient(0deg, #cb4329 0%, #cb4329 100%);
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none; }

.btn-3 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%; }

.btn-3:before,
.btn-3:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  background: white;
  transition: all 0.3s ease; }

.btn-3:before {
  height: 0%;
  width: 2px; }

.btn-3:after {
  width: 0%;
  height: 2px; }

.btn-3:hover {
  background: transparent;
  box-shadow: none; }

.btn-3:hover:before {
  height: 100%; }

.btn-3:hover:after {
  width: 100%; }

.btn-3 span:hover {
  color: #027efb; }

.btn-3 span:before,
.btn-3 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  background: #027efb;
  transition: all 0.3s ease; }

.btn-3 span:before {
  width: 2px;
  height: 0%; }

.btn-3 span:after {
  width: 0%;
  height: 2px; }

.btn-3 span:hover:before {
  height: 100%; }

.btn-3 span:hover:after {
  width: 100%; }

* {
  box-sizing: border-box; }

.container2 {
  padding: 10px 10%;
  background: #efefef; }

.container2 p {
  background: #fff;
  padding: 10px;
  box-shadow: 0 0 5px #ccc;
  border-radius: 5px; }

.phone {
  position: fixed;
  bottom: 100px;
  right: 100px;
  width: 100px;
  height: 100px; }

.quick-alo-ph-circle {
  position: absolute;
  width: 160px;
  height: 160px;
  top: 50px;
  left: 50px;
  border: 2px solid #00a1ff;
  background-color: transparent;
  border-radius: 100%;
  opacity: .1;
  animation: quick-alo-circle-anim 1.2s infinite ease-in-out;
  transition: all .5s;
  transform-origin: 50% 50%; }

.quick-alo-ph-circle-fill {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 80px;
  left: 80px;
  background-color: rgba(0, 161, 255, 0.5);
  border-radius: 100%;
  border: 2px solid transparent;
  opacity: .1;
  animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
  transition: all .5s;
  transform-origin: 50% 50%; }

.quick-alo-ph-img-circle {
  z-index: 2;
  position: absolute;
  width: 60px;
  height: 60px;
  top: 100px;
  left: 100px;
  background: #00a1ff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABrklEQVRYR82XjTEEQRCFX0dABlwEiAARkAEyIAJEoERACETARUAIJwIyeOqptfbm5qeP3lpTdVVXVzPd3/R0v+4zTLxsYv/4XwAkrwDsV6JyZmaLyKj1ESB5AOCpYfzazAQZttYFuDWz8zDvwE8OkNwF8NIwvjCz2SgAMkqSDuOzyDxYqgKSrwB2GhBKxHsHqGtLCiDDJ42Tj2Z27LLu2JQCnAK4a5x7M7Nth23XlhRgE8B74+SemempQtaKEpKsPUPo++sGOYCSIIU7zwJ05ficSLLkV6H/CIn7wEi2GRVkOVwFixEoREE/hz9DsR2TVKkp2zeSsI9bBUNnJNV4bhIA5cFhVCk2B5JCWVYhSEopjwAob6qa4QGQOKkqcj1iJSdIpmoqWEHIhr7Ph1BNgC4haxAPAC7UITPOc1UrCOXR12TlAnBAyKhAdHvPUg4pIn6AAYQc1ebG8QC+LXfD66XHU2HP7yKQlKhGODWu1gCTY/g7wCAaendNyltrRCQOIAERjCc/ejV1V4H3dp2ES4jU1vVJpXxpogoHSEE7oOEIp9G+/3c1OkArcpMDfAIqL6EhVS6JOAAAAABJRU5ErkJggg==) no-repeat center center;
  border-radius: 100%;
  border: 2px solid transparent;
  opacity: .99;
  animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
  transform-origin: 50% 50%; }

.phonetext {
  border-radius: 15px;
  z-index: 1;
  position: absolute;
  width: 200px;
  top: 100px;
  left: -80px;
  background: #00a1ff;
  color: #fff;
  padding: 10px 20px;
  margin-top: 13px;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 1.5s linear; }

.phone:hover .phonetext {
  display: block;
  visibility: visible;
  opacity: 1; }

@keyframes quick-alo-circle-anim {
  0% {
    transform: rotate(0) scale(0.5) skew(1deg);
    opacity: .1; }
  30% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: .5; }
  100% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity: .6; } }
@keyframes quick-alo-circle-fill-anim {
  0% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: .2; }
  50% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity: .2; }
  100% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: .2; } }
@keyframes quick-alo-circle-img-anim {
  0% {
    transform: rotate(0) scale(1) skew(1deg); }
  10% {
    transform: rotate(-25deg) scale(1) skew(1deg); }
  20% {
    transform: rotate(25deg) scale(1) skew(1deg); }
  30% {
    transform: rotate(-25deg) scale(1) skew(1deg); }
  40% {
    transform: rotate(25deg) scale(1) skew(1deg); }
  50% {
    transform: rotate(0) scale(1) skew(1deg); }
  100% {
    transform: rotate(0) scale(1) skew(1deg); } }
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0); }
  100% {
    opacity: 1;
    transform: none; } }
.banner-sub {
  font-size: 1.5rem;
  text-shadow: 2px 2px 2px #021950; }

.normal-p {
  font-size: 1.5rem; }
  @media only screen and (max-width: 37.5em) {
    .normal-p {
      font-size: 1rem; } }

.star {
  float: right;
  margin-top: -7px;
  z-index: 99; }

.star2 {
  float: right;
  margin-top: 7px; }

h3 {
  overflow: hidden; }

h3:after {
  content: "";
  display: inline-block;
  height: 0.5em;
  vertical-align: bottom;
  width: 72%;
  margin-right: -72%;
  margin-left: 10px;
  border-top: 4px solid #bc202e;
  z-index: -1; }

.locksmith {
  background: white;
  width: 300px;
  height: 100px;
  margin-bottom: 2rem;
  background: linear-gradient(153deg, rgba(255, 255, 255, 0) 0%, rgba(42, 65, 107, 0.34) 50%);
  background-color: #e7e7e7;
  border-radius: 1rem;
  box-shadow: -10px 25px 50px rgba(0, 0, 0, 0.4);
  border: solid 1px #ededed; }
  .locksmith p {
    margin-left: 0;
    color: #333e5b;
    font-size: 1rem;
    font-weight: 600;
    padding: 1rem; }
  .locksmith img {
    height: 100px;
    float: left;
    padding: 16px 16px 16px 0; }

.container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr repeat(9, auto-fill);
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "banner banner banner banner banner banner banner banner banner banner banner banner" ". icons  icons icons icons icons icons icons icons icons icons ." "article-holder article-holder article-holder article-holder article-holder article-holder article-holder article-holder article-holder article-holder article-holder article-holder" "services services services services services services services services services services services services" "emerg emerg emerg emerg emerg emerg emerg emerg emerg emerg emerg emerg" "gates gates gates gates gates gates gates gates gates gates gates gates" ". logos logos logos logos logos logos logos logos logos logos ." "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; }
  @media only screen and (min-width: 112.5em) {
    .container {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: 140px repeat(9, auto-fill);
      gap: 0px 0px;
      grid-auto-flow: row;
      grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "banner banner banner banner banner banner banner banner banner banner banner banner" ". . . icons icons icons icons icons icons . . ." "article-holder article-holder article-holder article-holder article-holder article-holder article-holder article-holder article-holder article-holder article-holder article-holder" "services services services services services services services services services services services services" "emerg emerg emerg emerg emerg emerg emerg emerg emerg emerg emerg emerg" "gates gates gates gates gates gates gates gates gates gates gates gates" ". . logos logos logos logos logos logos logos logos . ." "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 75em) {
    .container {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: 120px repeat(9, auto-fill);
      gap: 0px 0px;
      grid-auto-flow: row;
      grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "banner banner banner banner banner banner banner banner banner banner banner banner" ". icons  icons icons icons icons icons icons icons icons icons ." "article-holder article-holder article-holder article-holder article-holder article-holder article-holder article-holder article-holder article-holder article-holder article-holder" "services services services services services services services services services services services services" "emerg emerg emerg emerg emerg emerg emerg emerg emerg emerg emerg emerg" "gates gates gates gates gates gates gates gates gates gates gates gates" "logos logos logos logos logos logos logos logos logos logos logos logos" "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 64em) {
    .container {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 100px repeat(9, auto-fill);
      gap: 0;
      grid-auto-flow: row;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "banner banner banner banner banner banner banner banner" "icons icons  icons icons icons icons  icons icons" "article-holder article-holder article-holder article-holder article-holder article-holder article-holder article-holder" "services services services services services services services services" "emerg emerg emerg emerg emerg emerg emerg emerg" "gates gates gates gates gates gates gates gates" "logos logos logos logos logos logos logos logos" "form form form form form form form form" "footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 51.25em) {
    .container {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 100px repeat(9, auto-fill);
      gap: 0;
      grid-auto-flow: row;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "banner banner banner banner banner banner banner banner" "icons icons  icons icons icons icons  icons icons" "article-holder article-holder article-holder article-holder article-holder article-holder article-holder article-holder" "services services services services services services services services" "emerg emerg emerg emerg emerg emerg emerg emerg" "gates gates gates gates gates gates gates gates" "logos logos logos logos logos logos logos logos" "form form form form form form form form" "footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 37.5em) {
    .container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto repeat(9, auto-fill);
      gap: 0px 0px;
      grid-auto-flow: row;
      grid-template-areas: "bar bar bar bar" "banner banner banner banner" "icons icons  icons icons" "article-holder article-holder article-holder article-holder" "services services services services" "emerg emerg emerg emerg" "gates gates gates gates" "logos logos logos logos" "form form form form" "footer footer footer footer"; } }

.bar {
  grid-area: bar;
  background-color: #1a2139;
  position: fixed;
  width: 100%;
  z-index: 99999; }
  .bar .top {
    grid-area: top;
    height: auto;
    border-bottom: solid 5px #bc202e; }
    .bar .top h1 {
      font-size: 14px;
      text-align: center;
      color: #fff;
      background-color: #1a2139;
      padding: 1rem;
      text-transform: uppercase; }
      @media only screen and (min-width: 112.5em) {
        .bar .top h1 {
          font-size: 1rem; } }
      @media only screen and (max-width: 75em) {
        .bar .top h1 {
          font-size: 14px; } }
      @media only screen and (max-width: 37.5em) {
        .bar .top h1 {
          font-size: 10px;
          padding: 8px; } }

/*-------------BANNER*/
.banner {
  grid-area: banner;
  background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 20%, transparent 10%), url("../img/garage-doors-repair-houston-texas.png");
  margin: 136px  0 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top right;
  height: auto;
  border-top: solid 5px #bc202e;
  border-bottom: solid 2px #bc202e;
  height: auto;
  padding-bottom: 4rem; }
  @media only screen and (min-width: 112.5em) {
    .banner {
      background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 20%, transparent 10%), url("../img/garage-doors-repair-houston-texas.png");
      background-position: right top; } }
  @media only screen and (max-width: 64em) {
    .banner {
      background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 20%, transparent 10%), url("../img/garage-doors-repair-houston-texas-t.png");
      background-position: bottom; } }
  @media only screen and (max-width: 51.25em) {
    .banner {
      background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 20%, transparent 10%), url("../img/garage-doors-repair-houston-texas-t.png");
      background-position: bottom; } }
  @media only screen and (max-width: 37.5em) {
    .banner {
      background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 20%, transparent 10%), url("../img/garage-doors-repair-houston-texas-m.png");
      margin: 100px 0 0 0;
      padding: 0; } }
  .banner .banner-title {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat 2, 1fr;
    grid-template-areas: ". ban-left ban-left ban-left ban-left ban-left ban-left ban-right ban-right ban-right . ." ". ban-left ban-left ban-left ban-left ban-left ban-left ban-right ban-right ban-right . .";
    grid-gap: 0 32px 0 0;
    text-shadow: 2px 2px 2px #021950;
    color: white;
    padding-top: 3rem; }
    @media only screen and (min-width: 112.5em) {
      .banner .banner-title {
        grid-template-areas: ". . . ban-left ban-left ban-left ban-left ban-right ban-right ban-right . ." ". . . ban-left ban-left ban-left ban-left ban-right ban-right ban-right . ."; } }
    @media only screen and (max-width: 75em) {
      .banner .banner-title {
        grid-template-areas: ". ban-left ban-left ban-left ban-left ban-left ban-left ban-right ban-right . . ." ". ban-left ban-left ban-left ban-left ban-left ban-left ban-right ban-right . . ."; } }
    @media only screen and (max-width: 64em) {
      .banner .banner-title {
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat 2, 1fr;
        grid-template-areas: "ban-left ban-left ban-left ban-left ban-left ban-left ban-left ." "ban-right ban-right ban-right ban-right ban-right ban-right . ."; } }
    @media only screen and (max-width: 51.25em) {
      .banner .banner-title {
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat 2, 1fr;
        grid-template-areas: "ban-left ban-left ban-left ban-left ban-left ban-left ban-left ban-left" "ban-right ban-right ban-right ban-right ban-right ban-right . .";
        padding: 1rem; } }
    @media only screen and (max-width: 37.5em) {
      .banner .banner-title {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat 2, 1fr;
        grid-template-areas: "ban-left ban-left ban-left ban-left" "ban-right ban-right ban-right ban-right";
        padding: 2rem .5rem 0 .5rem;
        margin: 0; } }
    .banner .banner-title p {
      margin-top: 8px;
      font-size: 18px; }
    .banner .banner-title h2 {
      color: #f73a18;
      padding-top: 0; }
      @media only screen and (max-width: 64em) {
        .banner .banner-title h2 {
          font-size: 3rem;
          line-height: 1; } }
      @media only screen and (max-width: 51.25em) {
        .banner .banner-title h2 {
          padding-top: 1rem; } }
      @media only screen and (max-width: 37.5em) {
        .banner .banner-title h2 {
          padding-top: 0;
          line-height: .5; } }
    .banner .banner-title .title-big {
      font-size: 3rem;
      color: white;
      font-weight: 600; }
      @media only screen and (max-width: 51.25em) {
        .banner .banner-title .title-big {
          font-size: 2.5rem; } }
      @media only screen and (max-width: 37.5em) {
        .banner .banner-title .title-big {
          font-size: 1.5rem;
          text-transform: uppercase;
          font-weight: 800; } }
    .banner .banner-title .title-big-2 {
      font-size: 1.5rem; }
      @media only screen and (max-width: 64em) {
        .banner .banner-title .title-big-2 {
          font-size: 2rem; } }
      @media only screen and (max-width: 51.25em) {
        .banner .banner-title .title-big-2 {
          font-size: 1.8rem;
          line-height: 1; } }
      @media only screen and (max-width: 37.5em) {
        .banner .banner-title .title-big-2 {
          font-size: 1.5rem;
          line-height: .5; } }
    .banner .banner-title .banner-left {
      grid-area: ban-left;
      padding-left: 2rem;
      padding-right: 2rem;
      /*button for phone*/ }
      @media only screen and (max-width: 37.5em) {
        .banner .banner-title .banner-left {
          padding: 1rem; } }
      .banner .banner-title .banner-left #button-desktop {
        display: inline-block;
        margin-right: 1rem; }
        @media only screen and (min-width: 112.5em) {
          .banner .banner-title .banner-left #button-desktop {
            display: inline-block; } }
        @media only screen and (max-width: 75em) {
          .banner .banner-title .banner-left #button-desktop {
            display: inline-block; } }
        @media only screen and (max-width: 51.25em) {
          .banner .banner-title .banner-left #button-desktop {
            display: none; } }
        @media only screen and (max-width: 37.5em) {
          .banner .banner-title .banner-left #button-desktop {
            display: none; } }
      .banner .banner-title .banner-left p {
        line-height: 1.6;
        padding-top: 8px;
        font-size: 1.3rem;
        letter-spacing: normal; }
        @media only screen and (max-width: 64em) {
          .banner .banner-title .banner-left p {
            line-height: 1.3; } }
        @media only screen and (max-width: 37.5em) {
          .banner .banner-title .banner-left p {
            font-size: 20px;
            margin-top: 1rem; } }
    .banner .banner-title .banner-right {
      grid-area: ban-right;
      color: white;
      text-shadow: 2px 2px 2px #021950;
      margin: 16rem 0 0 1rem; }
      @media only screen and (min-width: 112.5em) {
        .banner .banner-title .banner-right {
          margin: 17.2rem 0 0 1rem; } }
      @media only screen and (max-width: 64em) {
        .banner .banner-title .banner-right {
          margin: 3rem 0 0 2rem; } }
      @media only screen and (max-width: 51.25em) {
        .banner .banner-title .banner-right {
          padding: 1rem;
          margin: 0; } }
      @media only screen and (max-width: 37.5em) {
        .banner .banner-title .banner-right {
          padding: 1rem;
          margin: 0; } }
      .banner .banner-title .banner-right h3 {
        font-size: 1.5rem;
        color: #f73a18; }
        @media only screen and (max-width: 64em) {
          .banner .banner-title .banner-right h3 {
            font-size: 2rem; } }
        @media only screen and (max-width: 37.5em) {
          .banner .banner-title .banner-right h3 {
            font-size: 1.5rem;
            line-height: 1; } }
      .banner .banner-title .banner-right p {
        margin-right: 10%;
        line-height: 1.6;
        padding-top: 8px;
        font-size: 1.3rem;
        letter-spacing: normal; }
        @media only screen and (max-width: 37.5em) {
          .banner .banner-title .banner-right p {
            font-size: 20px;
            margin-bottom: 2rem;
            line-height: 1.3; } }
  .banner .extra-buttons {
    display: none; }
    @media only screen and (min-width: 112.5em) {
      .banner .extra-buttons {
        display: none; } }
    @media only screen and (max-width: 75em) {
      .banner .extra-buttons {
        display: none; } }
    @media only screen and (max-width: 51.25em) {
      .banner .extra-buttons {
        display: block;
        margin: -2.5rem 0 0 2rem;
        width: 100%; }
        .banner .extra-buttons #hide-button {
          display: none; } }
    @media only screen and (max-width: 37.5em) {
      .banner .extra-buttons {
        display: block;
        margin: -1rem 1rem 3rem 1rem;
        width: 100%; }
        .banner .extra-buttons #hide-button {
          display: none; } }

/*-------------icons*/
.icons {
  margin: 0 auto;
  grid-area: icons;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 16px;
  justify-content: space-around;
  align-items: stretch;
  align-self: flex-start;
  padding: 16px 8px; }
  @media only screen and (max-width: 64em) {
    .icons {
      display: flex;
      /* Activates flexbox */
      flex-wrap: wrap;
      /* Allows items to move to a new row if they run out of space */
      gap: 1rem;
      /* Optional: Adds spacing between items */
      justify-content: flex-start; } }
  @media only screen and (max-width: 51.25em) {
    .icons {
      display: flex;
      /* Activates flexbox */
      flex-wrap: wrap;
      /* Allows items to move to a new row if they run out of space */
      gap: 1rem;
      /* Optional: Adds spacing between items */
      justify-content: flex-start;
      margin: 0 1rem; } }
  @media only screen and (max-width: 37.5em) {
    .icons {
      flex-direction: column;
      gap: 0;
      justify-content: flex-start;
      align-items: flex-start;
      margin: .5rem;
      justify-content: center;
      align-items: center; } }
  .icons .item {
    text-align: center;
    padding: 1rem 0;
    width: 70%; }
    @media only screen and (max-width: 75em) {
      .icons .item {
        flex: 0 0 calc(33.33% - 15px);
        margin: 0;
        text-align: left;
        padding: 2rem 1rem 2rem 0; } }
    @media only screen and (max-width: 64em) {
      .icons .item {
        flex: 0 0 calc(24.33% - 15px);
        margin: 0;
        text-align: left;
        padding: 1rem 1rem 1rem 2rem; } }
    @media only screen and (max-width: 51.25em) {
      .icons .item {
        flex: 0 0 33%;
        margin: 0;
        text-align: left;
        padding: 1rem 1rem 1rem 0; } }
    @media only screen and (max-width: 37.5em) {
      .icons .item {
        width: 100%;
        text-align: left;
        border: solid 1px #ededed;
        padding: 0 1rem;
        border-radius: .5rem; } }
    .icons .item .item-cup {
      text-transform: uppercase;
      color: #2eace9;
      font-weight: 600;
      margin: 0px; }
      @media only screen and (max-width: 37.5em) {
        .icons .item .item-cup {
          margin: 0 0 4px 0;
          font-size: 1.2rem;
          font-weight: 400; } }
  .icons img {
    width: 60px;
    height: auto;
    margin-bottom: 12px; }
    @media only screen and (max-width: 64em) {
      .icons img {
        float: left;
        width: 32px;
        position: relative;
        border: 0;
        margin-right: 8px; } }
    @media only screen and (max-width: 51.25em) {
      .icons img {
        float: left;
        width: 48px;
        margin: 1rem 1rem 4rem 0; } }
    @media only screen and (max-width: 37.5em) {
      .icons img {
        float: left;
        width: 44px;
        margin: 16px 1.5rem 3rem 0; } }
  .icons .item--1 {
    flex-grow: 1; }
    @media only screen and (max-width: 37.5em) {
      .icons .item--1 {
        padding: 0 1rem;
        margin-bottom: .5rem; }
        .icons .item--1 img {
          margin-top: 32px; } }
  .icons .item--2 {
    flex-grow: 1; }
    @media only screen and (max-width: 37.5em) {
      .icons .item--2 {
        padding: 16px 1rem 0  1rem;
        margin-bottom: .5rem; }
        .icons .item--2 img {
          margin-top: 32px; } }
  .icons .item--3 {
    flex-grow: 1; }
    @media only screen and (max-width: 37.5em) {
      .icons .item--3 {
        padding: 16px 1rem 0  1rem;
        margin-bottom: .5rem; }
        .icons .item--3 img {
          margin-top: 32px; } }
  .icons .item--4 {
    flex-grow: 1; }
    @media only screen and (max-width: 37.5em) {
      .icons .item--4 {
        padding: 16px 1rem 0  1rem;
        margin-bottom: .5rem; }
        .icons .item--4 img {
          margin-top: 32px; } }

/*main text*/
.article-holder {
  grid-area: article-holder;
  padding: 4rem;
  background-image: url("../img/garage-doors-repair.png");
  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
  border-top: solid 2px #9d9683;
  border-bottom: solid 2px #9d9683;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto-fill;
  grid-template-areas: ". article article article article article article article article article article ."; }
  @media only screen and (min-width: 112.5em) {
    .article-holder {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: auto-fill;
      grid-template-areas: ". . . article article article article article article . . ."; } }
  @media only screen and (max-width: 64em) {
    .article-holder {
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: auto-fill;
      grid-template-areas: "article article article article article article article article";
      padding: 1rem; } }
  @media only screen and (max-width: 51.25em) {
    .article-holder {
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: auto-fill;
      grid-template-areas: "article article article article article article article article";
      padding: 32px; } }
  @media only screen and (max-width: 37.5em) {
    .article-holder {
      padding: 1rem;
      background-image: url("../img/garage-doors-repair-mobile.png");
      background-position: left;
      background-repeat: no-repeat;
      background-size: cover;
      border-top: solid 2px #bc202e;
      border-bottom: solid 2px #bc202e;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 1fr;
      grid-template-areas: "article article"; } }
  .article-holder .article {
    grid-area: article;
    background-color: rgba(118, 129, 138, 0.2);
    backdrop-filter: blur(45px);
    padding: 3rem 2rem 0 3rem;
    border-radius: 3rem;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px 0 rgba(19, 35, 71, 0.75);
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 0px; }
    @media only screen and (max-width: 51.25em) {
      .article-holder .article {
        grid-template-columns: repeat(1, 1fr);
        grid-template-areas: "article";
        padding: 2rem;
        border-radius: .5rem;
        background-color: rgba(118, 129, 138, 0.2);
        backdrop-filter: blur(35px);
        border: solid 1px #bdb9b9; } }
    @media only screen and (max-width: 37.5em) {
      .article-holder .article {
        grid-template-columns: repeat(1, 1fr);
        grid-template-areas: "article";
        padding: 1.5rem;
        border-radius: .5rem;
        background-color: rgba(118, 129, 138, 0.2);
        backdrop-filter: blur(35px);
        border: solid 1px #bdb9b9; } }
    .article-holder .article .text {
      margin: 0; }
      @media only screen and (max-width: 37.5em) {
        .article-holder .article .text {
          grid-area: text; } }
    .article-holder .article .image {
      display: block; }
      @media only screen and (max-width: 51.25em) {
        .article-holder .article .image {
          display: none; } }
      @media only screen and (max-width: 37.5em) {
        .article-holder .article .image {
          display: none; } }
      .article-holder .article .image img {
        width: auto;
        height: auto; }
    .article-holder .article h4 {
      font-size: 2rem;
      margin-bottom: 1.5rem;
      text-shadow: 2px 2px 2px #021950;
      color: #f73a18;
      line-height: 1; }
      @media only screen and (min-width: 112.5em) {
        .article-holder .article h4 {
          font-size: 2.5rem;
          margin-bottom: 1.5rem;
          text-shadow: 2px 2px 2px #021950; } }
      @media only screen and (max-width: 75em) {
        .article-holder .article h4 {
          font-size: 1.5rem;
          margin-bottom: 1.5rem;
          text-shadow: 2px 2px 2px #021950; } }
      @media only screen and (max-width: 64em) {
        .article-holder .article h4 {
          font-size: 2rem; } }
      @media only screen and (max-width: 37.5em) {
        .article-holder .article h4 {
          font-size: 2rem; } }
    .article-holder .article p {
      font-size: 1.3rem;
      line-height: 1.4; }
      @media only screen and (max-width: 37.5em) {
        .article-holder .article p {
          font-size: 1rem; } }

/*services*/
.services {
  grid-area: services;
  box-shadow: inset 0 -10px 10px -10px #777;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 0;
  grid-template-areas: "line line line line line line line line line line line line" "serv serv serv serv serv serv serv serv serv serv serv serv"; }
  @media only screen and (min-width: 112.5em) {
    .services {
      display: grid;
      grid-template-rows: auto 1fr;
      grid-template-columns: repeat(12, 1fr);
      grid-gap: 0;
      grid-template-areas: "line line line line line line line line line line line line" ". . serv serv serv serv serv serv serv serv . ."; } }
  @media only screen and (max-width: 75em) {
    .services {
      display: grid;
      grid-template-rows: auto 1fr;
      grid-template-columns: repeat(12, 1fr);
      grid-gap: 0;
      grid-template-areas: "line line line line line line line line line line line line" "serv serv serv serv serv serv serv serv serv serv serv serv"; } }
  @media only screen and (max-width: 64em) {
    .services {
      display: grid;
      grid-template-rows: auto 1fr;
      grid-template-columns: repeat(8, 1fr);
      grid-gap: 0;
      grid-template-areas: "line line line line line line line line " "serv serv serv  serv serv serv serv  serv"; } }
  @media only screen and (max-width: 51.25em) {
    .services {
      isplay: grid;
      grid-template-rows: auto 1fr;
      grid-template-columns: repeat(8, 1fr);
      grid-gap: 0;
      grid-template-areas: "line line line line line line line line " "serv serv serv  serv serv serv serv  serv"; } }
  @media only screen and (max-width: 37.5em) {
    .services {
      display: grid;
      grid-template-rows: auto 1fr;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 0;
      grid-template-areas: "line line line line " "serv serv serv  serv"; } }
  .services .line {
    grid-area: line;
    color: white;
    padding: 1rem;
    background-color: #1a2139;
    font-size: 1.5rem;
    text-align: center;
    text-transform: uppercase;
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    box-shadow: 0 4px 15px 0 rgba(19, 35, 71, 0.75); }
    @media only screen and (max-width: 37.5em) {
      .services .line {
        font-size: 1rem; } }
  .services .serv {
    grid-area: serv;
    margin: 4rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row; }
    @media only screen and (max-width: 51.25em) {
      .services .serv {
        margin: 1rem; } }
    @media only screen and (max-width: 37.5em) {
      .services .serv {
        display: flex;
        flex-wrap: wrap;
        margin: 1rem 0 2rem 1rem; } }
    .services .serv div {
      flex: 0 0 30%;
      margin: 16px;
      background: linear-gradient(153deg, rgba(255, 255, 255, 0) 0%, rgba(42, 65, 107, 0.34) 100%);
      background-color: #e7e7e7;
      border-radius: 1rem;
      padding: 2rem;
      box-shadow: -10px 25px 50px rgba(0, 0, 0, 0.4);
      border: solid 1px #ededed;
      opacity: 1; }
      @media only screen and (min-width: 112.5em) {
        .services .serv div {
          flex: 0 0 30%;
          border: solid 1px #9d9683; } }
      @media only screen and (max-width: 75em) {
        .services .serv div {
          flex: 0 0 30%;
          border: solid 1px blue; } }
      @media only screen and (max-width: 64em) {
        .services .serv div {
          flex: 0 0 45%;
          border: solid 1px green; } }
      @media only screen and (max-width: 51.25em) {
        .services .serv div {
          flex: 0 0 33%;
          border: solid 1px #798190;
          margin-bottom: 1rem; } }
      @media only screen and (max-width: 64em) {
        .services .serv div {
          flex: 33.33%;
          margin: 0 .5rem; } }
      @media only screen and (max-width: 37.5em) {
        .services .serv div {
          flex: 0 0 96%;
          border-radius: .5rem;
          border: solid 1px #ededed;
          padding: 1rem;
          margin: 1rem 0 0 0; } }
      .services .serv div :hover {
        opacity: 0.5; }
    .services .serv img {
      width: 60px;
      height: auto;
      float: right; }
      @media only screen and (max-width: 37.5em) {
        .services .serv img {
          width: 4rem;
          float: right;
          margin-right: 8px; } }
    .services .serv .item--1, .services .serv .item--2, .services .serv .item--3, .services .serv .item--4, .services .serv .item--5, .services .serv .item--6 {
      opacity: 1;
      transition: opacity 0.3s ease;
      margin-bottom: 1rem; }
      @media only screen and (max-width: 37.5em) {
        .services .serv .item--1, .services .serv .item--2, .services .serv .item--3, .services .serv .item--4, .services .serv .item--5, .services .serv .item--6 {
          margin-bottom: .5rem; } }
  .services h5 {
    font-size: 1.5rem;
    color: #2eace9;
    margin-bottom: 8px;
    line-height: 1; }
    @media only screen and (max-width: 37.5em) {
      .services h5 {
        font-size: 20px;
        padding-bottom: 8px; } }
  .services img {
    width: 100%;
    height: auto; }
  .services a {
    padding-bottom: 2rem; }
  .services .link {
    font-weight: 600;
    position: relative;
    top: .5rem;
    left: .5rem; }

/*emerg*/
.emerg {
  grid-area: emerg;
  background-color: #e7e7e7;
  box-shadow: inset 0 -5px 5px -5px #333e5b;
  border-top: solid 2px #9d9683; }
  .emerg img {
    width: 280px;
    float: left;
    margin-right: 1rem; }
    @media only screen and (max-width: 51.25em) {
      .emerg img {
        object-fit: cover;
        /* Centers and scales the image to fit */
        border-radius: 50%;
        /* This magically turns the square into a circle */
        float: right; } }
    @media only screen and (max-width: 37.5em) {
      .emerg img {
        width: 100px;
        /* Adjust to your specific size */
        height: 100px;
        display: block;
        margin-top: 1rem;
        object-fit: cover;
        /* Centers and scales the image to fit */
        border-radius: 50%;
        /* This magically turns the square into a circle */
        display: block;
        margin: 2rem 0 0 0; } }
  .emerg h6 {
    padding-top: 2rem;
    color: #f73a18;
    text-shadow: -1px 1px 1px #333e5b;
    font-size: 2.5rem;
    letter-spacing: -1px;
    padding-bottom: 1rem;
    font-weight: 600;
    margin-bottom: 8px; }
    @media only screen and (max-width: 51.25em) {
      .emerg h6 {
        font-size: 2rem; } }
    @media only screen and (max-width: 37.5em) {
      .emerg h6 {
        line-height: 1;
        font-size: 2rem; } }
  .emerg p {
    font-size: 1.3rem; }
    @media only screen and (max-width: 37.5em) {
      .emerg p {
        font-size: 1rem; } }
  .emerg .emerg-holder {
    width: 1140px;
    margin: 2.5rem auto; }
    @media only screen and (max-width: 51.25em) {
      .emerg .emerg-holder {
        width: 100%;
        padding: 2rem; } }
    @media only screen and (max-width: 37.5em) {
      .emerg .emerg-holder {
        width: 100%;
        padding: 0 2rem;
        margin-top: 0; } }

/*gates*/
.gates {
  grid-area: gates;
  background-image: url("../img/garage-doors-repair-houston-tx.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 0;
  grid-template-areas: ". gates-holder gates-holder gates-holder gates-holder gates-holder gates-holder gates-holder gates-holder gates-holder gates-holder ."; }
  @media only screen and (min-width: 112.5em) {
    .gates {
      grid-template-areas: ". . . gates-holder gates-holder gates-holder gates-holder gates-holder gates-holder . . ."; } }
  @media only screen and (max-width: 64em) {
    .gates {
      grid-template-rows: auto 1fr;
      grid-template-columns: repeat(8, 1fr);
      grid-gap: 0;
      grid-template-areas: "gates-holder gates-holder gates-holder  gates-holder gates-holder gates-holder gates-holder gates-holder"; } }
  @media only screen and (max-width: 37.5em) {
    .gates {
      background: url("../img/Gates-Installation-Service-houston-tx-m.png");
      background-position: center;
      background-size: cover;
      display: grid;
      grid-template-rows: auto 1fr;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 0;
      grid-template-areas: "gates-holder gates-holder gates-holder gates-holder"; } }
  .gates .gates-holder {
    grid-area: gates-holder;
    margin: 4rem auto;
    background-color: rgba(118, 129, 138, 0.8);
    backdrop-filter: blur(5px);
    padding: 3rem;
    border-radius: 2rem;
    letter-spacing: 1px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 2 repeat, min-content;
    grid-template-areas: "gates-holder-left gates-holder-right" "gates-holder-left gates-holder-right";
    grid-gap: 2.5rem;
    color: white;
    box-shadow: 0 4px 15px 0 #132347; }
    @media only screen and (max-width: 64em) {
      .gates .gates-holder {
        margin: 4rem 1rem;
        padding: 2rem; } }
    @media only screen and (max-width: 37.5em) {
      .gates .gates-holder {
        border-radius: .5rem;
        margin: 2rem 1rem;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 2 repeat, 1fr;
        grid-template-areas: "gates-holder-left gates-holder-left" "gates-holder-right gates-holder-right";
        grid-gap: 0;
        background-color: rgba(118, 129, 138, 0.5);
        box-shadow: inset 0 -5px 5px -5px #333e5b;
        border-top: solid 2px #9d9683; } }
    .gates .gates-holder .gates-holder-left {
      grid-area: gates-holder-left;
      text-shadow: 1px 1px 1px #3f3f3f; }
      .gates .gates-holder .gates-holder-left h6 {
        font-size: 2rem;
        color: white;
        text-shadow: 2px 2px 2px #3f3f3f;
        margin-bottom: 1rem; }
        @media only screen and (max-width: 37.5em) {
          .gates .gates-holder .gates-holder-left h6 {
            font-size: 2rem;
            line-height: 1;
            letter-spacing: 0;
            margin-bottom: 1rem; } }
        .gates .gates-holder .gates-holder-left h6 .big {
          font-size: 4rem;
          position: relative;
          color: #f73a18;
          top: 10px;
          /* Moves it 10px down */
          left: 5px;
          /* Moves it 5px right */ }
      .gates .gates-holder .gates-holder-left h7 {
        font-size: 1.5rem;
        text-shadow: 1px 1px 1px #3f3f3f; }
        @media only screen and (max-width: 37.5em) {
          .gates .gates-holder .gates-holder-left h7 {
            font-size: 1.5rem;
            line-height: 1;
            letter-spacing: 0;
            margin-bottom: 1rem; } }
      .gates .gates-holder .gates-holder-left .title-1 {
        font-size: 20px;
        font-weight: 600;
        text-shadow: 1px 1px 1px #3f3f3f; }
        @media only screen and (max-width: 37.5em) {
          .gates .gates-holder .gates-holder-left .title-1 {
            font-weight: 400;
            font-size: 1rem;
            line-height: 1;
            letter-spacing: 0;
            margin-bottom: 8px; } }
      .gates .gates-holder .gates-holder-left .title-2 {
        text-transform: uppercase;
        font-weight: 600;
        color: white;
        padding-bottom: 0;
        text-shadow: 1px 1px 1px #3f3f3f;
        margin-top: 1rem; }
      .gates .gates-holder .gates-holder-left ul {
        text-shadow: 1px 1px 1px #3f3f3f;
        list-style: square;
        margin-top: -1rem; }
        .gates .gates-holder .gates-holder-left ul li {
          line-height: 2; }
      .gates .gates-holder .gates-holder-left .gates-holder-left-1 {
        grid-area: gates-holder-left-1;
        margin-top: 32px; }
        .gates .gates-holder .gates-holder-left .gates-holder-left-1 h8 {
          text-transform: uppercase;
          color: white;
          text-shadow: 1px 1px 1px #3f3f3f; }
        .gates .gates-holder .gates-holder-left .gates-holder-left-1 p {
          padding: .5rem 0;
          text-shadow: 1px 1px 1px #3f3f3f; }
    .gates .gates-holder .gates-holder-right {
      grid-area: gates-holder-right; }
      @media only screen and (max-width: 37.5em) {
        .gates .gates-holder .gates-holder-right {
          margin: 2rem 0 8px 0;
          border-radius: 0; } }
      .gates .gates-holder .gates-holder-right h8 {
        font-size: 2rem;
        text-shadow: 1px 1px 1px #3f3f3f; }
        @media only screen and (max-width: 37.5em) {
          .gates .gates-holder .gates-holder-right h8 {
            font-size: 1.5rem;
            letter-spacing: -1px; } }
      .gates .gates-holder .gates-holder-right .item3 {
        background-color: rgba(118, 129, 138, 0.2);
        backdrop-filter: blur(45px);
        padding: 2.5rem;
        border-radius: 2.5rem;
        box-shadow: 0 4px 15px 0 #132347; }
        @media only screen and (max-width: 37.5em) {
          .gates .gates-holder .gates-holder-right .item3 {
            background-color: transparent;
            backdrop-filter: none;
            padding: 0;
            border-radius: 0rem;
            box-shadow: none; } }
        .gates .gates-holder .gates-holder-right .item3 ul {
          list-style: none; }
          .gates .gates-holder .gates-holder-right .item3 ul li {
            line-height: 2; }
        .gates .gates-holder .gates-holder-right .item3 h8 {
          text-shadow: 1px 1px 1px #000;
          padding: 0; }
          @media only screen and (max-width: 37.5em) {
            .gates .gates-holder .gates-holder-right .item3 h8 {
              line-height: 1;
              font-size: 1.5rem;
              letter-spacing: -1px; } }
        .gates .gates-holder .gates-holder-right .item3 .space {
          padding-top: 1rem; }
      .gates .gates-holder .gates-holder-right .line2 {
        color: white;
        font-size: 1.3rem;
        margin-top: 2.5rem;
        padding: 1.5rem;
        border-radius: 3rem;
        font-weight: 600;
        letter-spacing: 3px;
        border: dashed 3px  white;
        text-shadow: 1px 1px 1px #2eace9;
        text-align: center; }
        @media only screen and (max-width: 37.5em) {
          .gates .gates-holder .gates-holder-right .line2 {
            border: none;
            padding: 1rem 0 0 0;
            text-align: left;
            font-weight: 900;
            margin: 0;
            letter-spacing: 0;
            font-size: 1.1rem; } }
      .gates .gates-holder .gates-holder-right .title-1 {
        font-size: 1.5rem;
        text-shadow: 1px 1px 1px #3f3f3f; }

/*logos*/
.logos {
  grid-area: logos;
  padding: 2rem; }
  @media only screen and (max-width: 37.5em) {
    .logos {
      padding: 1rem 0;
      margin-left: -2rem; } }
  .logos ul {
    list-style: none; }
    .logos ul li {
      width: 16.66%;
      float: left; }
      .logos ul li img {
        width: 100%; }

/*forms*/
.form {
  -webkit-box-shadow: 5px 5px 15px 5px #777;
  box-shadow: 5px 5px 15px 5px #777;
  margin-top: 1rem;
  background-image: url("../img/Garage-Doors-Houston-tx.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  padding: 2.5rem;
  grid-area: form;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas: ". form-left form-left form-left form-left form-left form-right form-right form-right form-right form-right ."; }
  @media only screen and (min-width: 112.5em) {
    .form {
      grid-template-areas: ". . form-left form-left form-left form-left form-right form-right form-right form-right . ."; } }
  @media only screen and (max-width: 64em) {
    .form {
      grid-template-columns: repeat(8, 1fr);
      grid-template-areas: "form-left form-left form-left form-left  form-right form-right form-right form-right"; } }
  @media only screen and (max-width: 51.25em) {
    .form {
      grid-template-rows: repeat(2, 1fr);
      grid-template-columns: repeat(8, 1fr);
      grid-template-areas: "form-left form-left form-left form-left  form-left form-left form-left form-left" "form-right form-right form-right form-right  form-right form-right form-right form-right"; } }
  @media only screen and (max-width: 37.5em) {
    .form {
      display: grid;
      grid-template-rows: repeat(2, min-content);
      grid-template-columns: 1fr;
      grid-template-areas: "form-left" "form-right";
      padding: 0 0;
      margin: 0; } }
  .form p {
    font-weight: 800;
    font-size: 1.5rem; }
  .form ul {
    list-style: none;
    display: flex;
    column-gap: 20px;
    /* Precise control over horizontal space */
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Creates 3 equal columns */
    column-gap: 30px;
    /* Space between columns */
    row-gap: 10px; }
    @media only screen and (min-width: 112.5em) {
      .form ul {
        grid-template-columns: repeat(3, 1fr);
        /* Creates 3 equal columns */ } }
    @media only screen and (max-width: 98em) {
      .form ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* Creates 3 equal columns */
        column-gap: 1rem;
        /* Space between columns */
        row-gap: 0;
        font-size: 1rem;
        line-height: 1.6;
        margin-left: 0; } }
    @media only screen and (max-width: 75em) {
      .form ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* Creates 3 equal columns */
        column-gap: 1rem;
        /* Space between columns */
        row-gap: 0;
        font-size: 1rem;
        line-height: 1.6;
        margin-left: 0; } }
    @media only screen and (max-width: 64em) {
      .form ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* Creates 3 equal columns */
        column-gap: 1rem;
        /* Space between columns */
        row-gap: 0;
        font-size: 1rem;
        line-height: 1.6;
        margin-left: 0; } }
    @media only screen and (max-width: 51.25em) {
      .form ul {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        /* Creates 3 equal columns */
        column-gap: 1rem;
        /* Space between columns */
        row-gap: 0;
        font-size: 1rem;
        line-height: 1.6;
        margin-left: 0; } }
    @media only screen and (max-width: 37.5em) {
      .form ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* Creates 3 equal columns */
        column-gap: 1rem;
        /* Space between columns */
        row-gap: 0;
        font-size: 1rem;
        line-height: 1.6;
        margin-left: 0; } }
    .form ul li {
      white-space: nowrap;
      padding-right: 2.5rem; }
    .form ul li::before {
      content: "";
      display: inline-block;
      width: 16px;
      /* Custom width */
      height: 16px;
      /* Custom height */
      background-image: url("../img/location.svg");
      background-repeat: no-repeat;
      background-size: contain;
      margin-right: 4px;
      vertical-align: middle; }
  .form .form-left {
    grid-area: form-left;
    width: 60%;
    background-position: right; }
    @media only screen and (max-width: 37.5em) {
      .form .form-left {
        width: auto;
        padding: 1rem; } }
  .form .form-right {
    grid-area: form-right;
    background-color: #132347;
    width: 100%;
    margin: 2rem 0;
    padding: 0 1rem 1rem 1rem; }
    @media only screen and (max-width: 37.5em) {
      .form .form-right {
        width: 90%;
        padding: 0 1rem; } }
    @media only screen and (max-width: 37.5em) {
      .form .form-right {
        width: 100%;
        margin: 0;
        padding: 0 2rem 2rem 1rem; } }

/*footer*/
.footer {
  grid-area: footer;
  background-color: #333e5b;
  color: white; }
  .footer .footer-holder {
    margin: 4rem 0;
    padding: 0 2rem 4rem 2rem;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: ". footer-left footer-left footer-left footer-left footer-center footer-center footer-center  footer-right footer-right footer-right .";
    grid-gap: 4rem 0; }
    @media only screen and (min-width: 112.5em) {
      .footer .footer-holder {
        grid-template-areas: ". . footer-left footer-left footer-left footer-center footer-center footer-center  footer-right footer-right . ."; } }
    @media only screen and (max-width: 75em) {
      .footer .footer-holder {
        grid-template-areas: "footer-left footer-left footer-left footer-left footer-left footer-center footer-center footer-center  footer-right footer-right footer-right footer-right";
        grid-gap: 4rem 0; } }
    @media only screen and (max-width: 64em) {
      .footer .footer-holder {
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: 2fr;
        grid-template-areas: "footer-right footer-right footer-right footer-right footer-right footer-right footer-right footer-right" "footer-left footer-left footer-left footer-left footer-center footer-center footer-center footer-center";
        grid-gap: 0; } }
    @media only screen and (max-width: 51.25em) {
      .footer .footer-holder {
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: 2fr;
        grid-template-areas: "footer-right footer-right footer-right footer-right footer-right footer-right footer-right footer-right" "footer-left footer-left footer-left footer-left footer-center footer-center footer-center footer-center";
        grid-gap: 0; } }
    @media only screen and (max-width: 37.5em) {
      .footer .footer-holder {
        grid-template-rows: 1fr;
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas: "footer-right footer-right footer-right footer-right";
        grid-gap: 0; } }
    .footer .footer-holder ul {
      list-style: none; }
    .footer .footer-holder li {
      line-height: 2; }
    .footer .footer-holder .large-letters {
      font-weight: 600;
      text-transform: uppercase; }
    .footer .footer-holder .footer-left {
      grid-area: footer-left; }
      @media only screen and (max-width: 37.5em) {
        .footer .footer-holder .footer-left {
          display: none; } }
      .footer .footer-holder .footer-left .footer-item {
        text-align: left;
        font-size: 14px;
        margin-top: 8rem;
        line-height: 1; }
    .footer .footer-holder .footer-center {
      grid-area: footer-center; }
      @media only screen and (max-width: 37.5em) {
        .footer .footer-holder .footer-center {
          display: none; } }
    .footer .footer-holder .footer-right {
      grid-area: footer-right;
      line-height: 2; }
      .footer .footer-holder .footer-right .social {
        margin: 2rem 0 4rem 0; }
        .footer .footer-holder .footer-right .social img {
          width: 40px;
          height: auto;
          margin-left: 2px; }

/*BUTTON*/
.buttons {
  margin: 5%;
  text-align: center; }

.btn-hover {
  width: 15rem;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  margin: 2rem 4rem 0 0;
  height: 4rem;
  text-align: center;
  border: none;
  background-size: 300% 100%;
  padding: 16px;
  border-radius: 2rem;
  moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out; }
  @media only screen and (max-width: 37.5em) {
    .btn-hover {
      margin: 1rem 0;
      border-radius: .5rem;
      width: auto; } }

.btn-hover:hover {
  background-position: 100% 0;
  moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out; }

.btn-hover:focus {
  outline: none; }

.btn-hover.color-9 {
  background-image: linear-gradient(to right, #97acdb, #132347, #04befe, #3f86ed);
  box-shadow: 0 4px 15px 0 rgba(19, 35, 71, 0.75);
  font-family: roboto; }
  @media only screen and (max-width: 37.5em) {
    .btn-hover.color-9 {
      margin: 1rem 0 1rem 0; } }

.arrow {
  margin-left: 4px;
  color: #bc202e; }

h3 {
  overflow: hidden; }

h3:after {
  content: "";
  display: inline-block;
  height: 0.5em;
  vertical-align: bottom;
  width: 5%;
  margin-right: -5%;
  margin-left: 10px;
  border-top: 4px solid #bc202e; }

strong {
  font-weight: normal; }

.container-pages {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr repeat(6, minmax-content);
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". line2  line2 line2 line2 line2 line2 line2 line2 line2 line2  ." ". article-residential article-residential article-residential article-residential article-residential article-residential article-residential article-residential article-residential article-residential ." ". logos logos logos logos logos logos logos logos logos logos ." "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; }
  @media only screen and (min-width: 118.75em) {
    .container-pages {
      grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". . . line2 line2 line2 line2 line2 line2 . . ." ". . article-residential article-residential article-residential article-residential article-residential article-residential article-residential article-residential . ." ". . logos logos logos logos logos logos logos logos . ." "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; } }
  @media only screen and (min-width: 112.5em) {
    .container-pages {
      grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". . . line2 line2 line2 line2 line2 line2 .  . . " ". . .  article-residential article-residential article-residential article-residential article-residential article-residential . . ." ". . logos logos logos logos logos logos logos logos . ." "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 75em) {
    .container-pages {
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr repeat(6, minmax-content);
      gap: 0px 0px;
      grid-auto-flow: row;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" "line2 line2 line2 line2 line2 line2 line2 line2" "article-residential article-residential article-residential article-residential article-residential article-residential article-residential article-residential" "logos  logos logos logos logos logos logos logos" "form form form form form form form form" "footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 37.5em) {
    .container-pages {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: 1fr repeat(6, minmax-content);
      gap: 1rem;
      grid-template-areas: "bar bar bar bar" "bar2 bar2 bar2 bar2" "line2  line2 line2 line2" "article-residential article-residential article-residential  article-residential" "logos logos logos logos" "form form form form" "footer footer footer footer"; } }
  .container-pages .bar2 {
    grid-area: bar2;
    margin-top: 136px;
    background: url("../img/presidential-doors-houston-tx.png") no-repeat center top;
    background-size: cover;
    height: auto;
    border-top: solid 5px #bc202e;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: ". bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder .";
    height: auto;
    border-bottom: solid 2px #bc202e; }
    @media only screen and (min-width: 118.75em) {
      .container-pages .bar2 {
        grid-template-areas: ". . . bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder . ."; } }
    @media only screen and (max-width: 75em) {
      .container-pages .bar2 {
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 37.5em) {
      .container-pages .bar2 {
        grid-area: bar2;
        margin-top: 100px;
        background: url("../img/presidential-doors-houston-tx-m.png") no-repeat right top;
        background-size: cover;
        height: auto;
        border-top: solid 5px #bc202e;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder";
        height: auto;
        border-bottom: solid 2px #bc202e;
        padding: 0 1rem 0 2rem; } }
    .container-pages .bar2 .bar2-holder {
      grid-area: bar2-holder;
      padding: 2rem 2rem 3rem 2rem;
      text-shadow: 2px 2px 2px #021950;
      color: white; }
      @media only screen and (max-width: 37.5em) {
        .container-pages .bar2 .bar2-holder {
          grid-area: bar2-holder;
          padding: 2rem 0;
          text-shadow: 2px 2px 2px #021950;
          color: white; } }
      .container-pages .bar2 .bar2-holder h2 {
        font-size: 3rem;
        color: #f73a18;
        margin-bottom: 1rem; }
        @media only screen and (max-width: 75em) {
          .container-pages .bar2 .bar2-holder h2 {
            font-size: 2rem; } }
        @media only screen and (max-width: 51.25em) {
          .container-pages .bar2 .bar2-holder h2 {
            font-size: 2rem; } }
        @media only screen and (max-width: 37.5em) {
          .container-pages .bar2 .bar2-holder h2 {
            font-size: 2rem;
            line-height: 1;
            margin-bottom: .5rem;
            text-transform: uppercase;
            font-weight: 600; } }
      .container-pages .bar2 .bar2-holder p {
        font-size: 1.5rem;
        width: 75%; }
        @media only screen and (min-width: 112.5em) {
          .container-pages .bar2 .bar2-holder p {
            width: 70%; } }
        @media only screen and (max-width: 75em) {
          .container-pages .bar2 .bar2-holder p {
            font-size: 1.3rem; } }
        @media only screen and (max-width: 51.25em) {
          .container-pages .bar2 .bar2-holder p {
            font-size: 1.2rem; } }
        @media only screen and (max-width: 37.5em) {
          .container-pages .bar2 .bar2-holder p {
            width: 100%;
            font-size: 1rem; } }
      .container-pages .bar2 .bar2-holder ul {
        list-style: none;
        /* Remove default bullets */
        padding: 0 1.5rem 0 1rem;
        font-size: 1.3rem;
        line-height: 1.4; }
        @media only screen and (max-width: 37.5em) {
          .container-pages .bar2 .bar2-holder ul {
            padding: 0 0 1rem 0;
            font-size: 1rem;
            line-height: 1.4; } }
      .container-pages .bar2 .bar2-holder ul li::before {
        content: "\2713";
        /* Unicode for check mark (✓) */
        color: #f73a18;
        /* Optional: change color */
        font-weight: bold;
        display: inline-block;
        width: 1em;
        /* Adds consistent spacing */
        margin-left: -1em; }
        @media only screen and (max-width: 37.5em) {
          .container-pages .bar2 .bar2-holder ul li::before {
            width: 1.5em;
            margin-left: -1.8em; } }
  .container-pages .line2 {
    grid-area: line2;
    text-align: left;
    padding: 2rem 1rem;
    font-size: 2rem;
    color: #bc202e; }
    @media only screen and (max-width: 75em) {
      .container-pages .line2 {
        text-align: left;
        padding: 2rem 2rem 0 2rem;
        font-size: 1.5rem; } }
    @media only screen and (max-width: 51.25em) {
      .container-pages .line2 {
        padding: 2rem 2rem 0 2rem; } }
    @media only screen and (max-width: 37.5em) {
      .container-pages .line2 {
        text-align: left;
        font-size: 1.3rem;
        padding: 0 1rem 0 1rem; } }
    .container-pages .line2 h3 {
      overflow: hidden; }
      @media only screen and (max-width: 37.5em) {
        .container-pages .line2 h3 {
          font-size: 1.3rem;
          padding: 1rem 1rem 1rem 0; } }
    .container-pages .line2 h3:after {
      content: "";
      display: inline-block;
      height: 0.5em;
      vertical-align: bottom;
      width: 100%;
      margin-right: -100%;
      margin-left: 10px;
      border-top: 4px solid #bc202e; }
    .container-pages .line2 .bold-3 {
      color: #1a2139;
      font-size: 1.3rem; }
    .container-pages .line2 .normal-p {
      color: #1a2139;
      font-size: 1rem; }
  .container-pages .article-residential {
    grid-area: article-residential;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas: "article-residential-holder-item1 article-residential-holder-item2 article-residential-holder-item3" "article-residential-holder-item4 article-residential-holder-item5 article-residential-holder-item6";
    gap: 2rem;
    margin-top: 2rem;
    margin-bottom: 6rem; }
    @media only screen and (max-width: 75em) {
      .container-pages .article-residential {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-template-areas: "article-residential-holder-item1 article-residential-holder-item2" "article-residential-holder-item3 article-residential-holder-item4" "article-residential-holder-item5 article-residential-holder-item6";
        gap: 1rem 1rem;
        margin-top: 2rem;
        margin-bottom: 1rem; } }
    @media only screen and (max-width: 51.25em) {
      .container-pages .article-residential {
        grid-area: article-residential;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, min-content);
        grid-template-areas: "article-residential-holder-item1" "article-residential-holder-item2" "article-residential-holder-item3" "article-residential-holder-item4" "article-residential-holder-item5" "article-residential-holder-item6";
        gap: 0;
        margin-top: 1rem;
        margin-bottom: 6rem; } }
    @media only screen and (max-width: 37.5em) {
      .container-pages .article-residential {
        grid-area: article-residential;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, min-content);
        grid-template-areas: "article-residential-holder-item1" "article-residential-holder-item2" "article-residential-holder-item3" "article-residential-holder-item4" "article-residential-holder-item5" "article-residential-holder-item6";
        gap: 0;
        margin-top: 0;
        margin-bottom: 0; } }
    .container-pages .article-residential h3, .container-pages .article-residential h4, .container-pages .article-residential h5 {
      font-size: 1.5rem;
      padding: 1rem 1rem 1rem 0;
      color: #bc202e; }
      @media only screen and (max-width: 37.5em) {
        .container-pages .article-residential h3, .container-pages .article-residential h4, .container-pages .article-residential h5 {
          font-size: 1.3rem;
          padding: 1rem 1rem 1rem 0; } }
    .container-pages .article-residential img {
      width: 100%; }
    .container-pages .article-residential div {
      			 /*border-radius:36px;
      			 border: 1px solid #0003;
        box-shadow: 0 3px 12px #0003;
      			   aspect-ratio: 16/9;*/
      border-radius: 20px;
      /* Adjust for more/less rounding */
      /* Clips image and text to the corners */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      /* Adds depth */
      box-shadow: 0 3px 12px #0003;
      background: white;
      padding: 1.5rem; }
      @media only screen and (max-width: 75em) {
        .container-pages .article-residential div {
          margin: 0 1rem; } }
      @media only screen and (max-width: 37.5em) {
        .container-pages .article-residential div {
          margin: 0 1rem 1rem 1rem; } }
      .container-pages .article-residential div img {
        border-radius: 10px 10px 0 0;
        width: 100%;
        height: 200px;
        object-fit: cover;
        /* Ensures image fills space without stretching */
        padding: 0; }
      .container-pages .article-residential div ul {
        list-style: square;
        padding-left: 1rem; }
    .container-pages .article-residential .article-residential-holder-item1 {
      grid-area: article-residential-holder-item1; }
    .container-pages .article-residential .article-residential-holder-item2 {
      grid-area: article-residential-holder-item2; }
    .container-pages .article-residential .article-residential-holder-item3 {
      grid-area: article-residential-holder-item3; }
    .container-pages .article-residential .article-residential-holder-item4 {
      grid-area: article-residential-holder-item4; }
    .container-pages .article-residential .article-residential-holder-item5 {
      grid-area: article-residential-holder-item5; }
    .container-pages .article-residential .article-residential-holder-item6 {
      grid-area: article-residential-holder-item6; }
  .container-pages .logos {
    grid-area: logos; }
  .container-pages .form {
    grid-area: form; }
  .container-pages .footer {
    grid-area: footer; }

.container-motor {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr repeat(7, min-content);
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor ." " . . more-repair more-repair more-repair more-repair more-repair more-repair more-repair more-repair . ." "emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency" ". logos logos logos logos logos logos logos logos logos logos ." "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; }
  @media only screen and (min-width: 118.75em) {
    .container-motor {
      grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". . . article-motor article-motor article-motor article-motor article-motor article-motor article-motor . ." " . . . more-repair more-repair more-repair more-repair more-repair more-repair more-repair . ." "emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency" ". logos logos logos logos logos logos logos logos logos logos ." "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; } }
  @media only screen and (min-width: 112.5em) {
    .container-motor {
      grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". . . article-motor article-motor article-motor article-motor article-motor article-motor . . ." ". . . more-repair more-repair more-repair more-repair more-repair more-repair .  . ." "emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency" ". . logos logos logos logos logos logos logos logos . ." "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 75em) {
    .container-motor {
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0px 0px;
      grid-auto-flow: row;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". article-motor  article-motor  article-motor  article-motor  article-motor  article-motor." ". more-repair more-repair more-repair more-repair more-repair more-repair more-repair ." "emergency emergency emergency emergency emergency emergency emergency emergency" "logos  logos logos logos logos logos logos logos" "form form form form form form form form" "footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 64em) {
    .container-motor {
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" "article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor" "emergency emergency emergency emergency emergency emergency emergency emergency" "logos logos logos logos logos logos logos logos" "form form form form form form form form" "footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 51.25em) {
    .container-motor {
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" "article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor" "emergency emergency emergency emergency emergency emergency emergency emergency" "logos logos logos logos logos logos logos logos" "form form form form form form form form" "footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 37.5em) {
    .container-motor {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: 1fr repeat(7, min-content);
      gap: 0;
      grid-template-areas: "bar bar bar bar" "bar2 bar2 bar2 bar2" "article-motor article-motor article-motor article-motor" "emergency emergency emergency emergency" "logos logos logos logos" "form form form form" "footer footer footer footer"; } }
  .container-motor .bar2 {
    grid-area: bar2;
    margin-top: 136px;
    background: url("../img/Garage-Door-Motor-Repair-Houston-TX.png") no-repeat center top;
    background-size: cover;
    height: auto;
    border-top: solid 5px #bc202e;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: ". bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder .";
    height: auto;
    border-bottom: solid 2px #bc202e; }
    @media only screen and (min-width: 112.5em) {
      .container-motor .bar2 {
        grid-template-areas: ". . . bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder . ."; } }
    @media only screen and (max-width: 75em) {
      .container-motor .bar2 {
        background: url("../img/Garage-Door-Motor-Repair-Houston-TX-t.png") no-repeat right top;
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 64em) {
      .container-motor .bar2 {
        background: url("../img/Garage-Door-Motor-Repair-Houston-TX-t.png") no-repeat right top;
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 51.25em) {
      .container-motor .bar2 {
        background: url("../img/Garage-Door-Motor-Repair-Houston-TX-t.png") no-repeat right top;
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 37.5em) {
      .container-motor .bar2 {
        grid-area: bar2;
        margin-top: 100px;
        background: url("../img/presidential-doors-houston-tx-m.png") no-repeat right top;
        background-size: cover;
        height: auto;
        border-top: solid 5px #bc202e;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder";
        height: auto;
        border-bottom: solid 2px #bc202e;
        padding: 0 1rem 0 2rem; } }
    .container-motor .bar2 .bar2-holder {
      grid-area: bar2-holder;
      padding: 2rem 2rem 3rem 2rem;
      text-shadow: 2px 2px 2px #021950;
      color: white; }
      @media only screen and (max-width: 37.5em) {
        .container-motor .bar2 .bar2-holder {
          padding: 2rem 0;
          text-shadow: 2px 2px 2px #021950;
          color: white; } }
      .container-motor .bar2 .bar2-holder h2 {
        font-size: 3rem;
        color: #f73a18;
        margin-bottom: 1rem; }
        @media only screen and (max-width: 75em) {
          .container-motor .bar2 .bar2-holder h2 {
            font-size: 2rem; } }
        @media only screen and (max-width: 51.25em) {
          .container-motor .bar2 .bar2-holder h2 {
            font-size: 2rem; } }
        @media only screen and (max-width: 37.5em) {
          .container-motor .bar2 .bar2-holder h2 {
            font-size: 2rem;
            line-height: 1;
            margin-top: 1rem;
            margin-bottom: .5rem;
            text-transform: uppercase;
            font-weight: 600; } }
      .container-motor .bar2 .bar2-holder p {
        font-size: 1.5rem;
        width: 75%; }
        @media only screen and (min-width: 112.5em) {
          .container-motor .bar2 .bar2-holder p {
            width: 70%; } }
        @media only screen and (max-width: 75em) {
          .container-motor .bar2 .bar2-holder p {
            font-size: 1.3rem; } }
        @media only screen and (max-width: 51.25em) {
          .container-motor .bar2 .bar2-holder p {
            font-size: 1.2rem; } }
        @media only screen and (max-width: 37.5em) {
          .container-motor .bar2 .bar2-holder p {
            width: 100%;
            font-size: 1rem; } }
      .container-motor .bar2 .bar2-holder ul {
        list-style: none;
        /* Remove default bullets */
        padding: 0 1.5rem 0 1rem;
        font-size: 1.3rem;
        line-height: 1.4; }
        @media only screen and (max-width: 37.5em) {
          .container-motor .bar2 .bar2-holder ul {
            padding: 0 0 1rem 0;
            font-size: 1rem;
            line-height: 1.4; } }
      .container-motor .bar2 .bar2-holder ul li::before {
        content: "\2713";
        /* Unicode for check mark (✓) */
        color: #f73a18;
        /* Optional: change color */
        font-weight: bold;
        display: inline-block;
        width: 1em;
        /* Adds consistent spacing */
        margin-left: -1em; }
        @media only screen and (max-width: 37.5em) {
          .container-motor .bar2 .bar2-holder ul li::before {
            width: 1.5em;
            margin-left: -1.8em; } }
  .container-motor .line2 {
    grid-area: line2;
    text-align: center;
    padding: 2rem 1rem;
    font-size: 2rem; }
  .container-motor .article-motor {
    grid-area: article-motor;
    padding-top: 2rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, min-content);
    grid-gap: 2rem;
    grid-template-areas: "article-motor-1" "article-motor-2" "article-motor-3"; }
    @media only screen and (max-width: 64em) {
      .container-motor .article-motor {
        padding: 1rem; } }
    @media only screen and (max-width: 37.5em) {
      .container-motor .article-motor {
        padding: 0 1rem;
        grid-gap: 0; } }
    .container-motor .article-motor .article-motor-1 {
      grid-area: article-motor-1; }
      @media only screen and (max-width: 64em) {
        .container-motor .article-motor .article-motor-1 {
          padding: 0 1rem; } }
      @media only screen and (max-width: 37.5em) {
        .container-motor .article-motor .article-motor-1 {
          width: 100%;
          padding: 0;
          margin: 0; } }
      .container-motor .article-motor .article-motor-1 h3 {
        overflow: hidden; }
        @media only screen and (max-width: 37.5em) {
          .container-motor .article-motor .article-motor-1 h3 {
            font-size: 1.3rem;
            padding: 1rem 1rem 1rem 0; } }
      .container-motor .article-motor .article-motor-1 h3:after {
        content: "";
        display: inline-block;
        height: 0.5em;
        vertical-align: bottom;
        width: 100%;
        margin-right: -100%;
        margin-left: 10px;
        border-top: 4px solid #bc202e; }
      .container-motor .article-motor .article-motor-1 img {
        float: right;
        margin: 2rem;
        border-radius: 16px;
        /* Adjust for more/less rounding */
        /* Clips image and text to the corners */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* Adds depth */
        box-shadow: 0 3px 12px #0003; }
        @media only screen and (max-width: 64em) {
          .container-motor .article-motor .article-motor-1 img {
            float: left;
            width: 50%;
            margin: 0 2rem 2rem 0; } }
        @media only screen and (max-width: 37.5em) {
          .container-motor .article-motor .article-motor-1 img {
            width: 100%;
            padding: 0;
            margin: 0 0 1rem 0; } }
      .container-motor .article-motor .article-motor-1 ul {
        position: relative;
        left: 2rem; }
        @media only screen and (max-width: 37.5em) {
          .container-motor .article-motor .article-motor-1 ul {
            left: 0;
            width: 90%; } }
    .container-motor .article-motor .article-motor-2 {
      grid-area: article-motor-2;
      width: 100%; }
      @media only screen and (min-width: 112.5em) {
        .container-motor .article-motor .article-motor-2 {
          margin-top: 0; } }
      @media only screen and (max-width: 64em) {
        .container-motor .article-motor .article-motor-2 {
          float: left;
          margin: 0;
          padding: 0 1rem; } }
      @media only screen and (max-width: 37.5em) {
        .container-motor .article-motor .article-motor-2 {
          width: 100%;
          padding: 0;
          margin: 0; } }
      .container-motor .article-motor .article-motor-2 ul {
        width: 60%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* Creates 3 equal columns */
        column-gap: 30px;
        /* Space between columns */
        row-gap: 10px; }
        @media only screen and (max-width: 64em) {
          .container-motor .article-motor .article-motor-2 ul {
            width: 100%; } }
        @media only screen and (max-width: 37.5em) {
          .container-motor .article-motor .article-motor-2 ul {
            width: 80%;
            padding-bottom: 1rem; } }
    .container-motor .article-motor .article-motor-3 {
      grid-area: article-motor-3;
      margin: 0 0 5rem 0; }
      .container-motor .article-motor .article-motor-3 img {
        float: left;
        margin: 0 3rem 2rem 0;
        border-radius: 16px;
        /* Adjust for more/less rounding */
        /* Clips image and text to the corners */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* Adds depth */
        box-shadow: 0 3px 12px #0003; }
        @media only screen and (max-width: 37.5em) {
          .container-motor .article-motor .article-motor-3 img {
            width: 100%;
            padding: 0 0 1rem 0;
            margin: 0 0 1rem 0; } }
      .container-motor .article-motor .article-motor-3 h4 {
        padding-top: 0;
        overflow: hidden; }
      .container-motor .article-motor .article-motor-3 h4:after {
        content: "";
        display: inline-block;
        height: 0.3em;
        vertical-align: bottom;
        width: 100%;
        margin-right: -100%;
        margin-left: 10px;
        border-top: 2px solid #bc202e; }
      .container-motor .article-motor .article-motor-3 ul {
        position: relative;
        left: 2rem; }
      .container-motor .article-motor .article-motor-3 ul {
        position: relative;
        left: 2rem; }
        @media only screen and (max-width: 37.5em) {
          .container-motor .article-motor .article-motor-3 ul {
            left: 0;
            width: 90%; } }
    .container-motor .article-motor .p-long {
      width: 100%;
      text-align: left;
      color: #333e5b;
      font-size: 1.3rem;
      font-weight: 600; }
  .container-motor h3, .container-motor h4, .container-motor h5 {
    font-size: 1.5rem;
    padding: 1rem 1rem 1rem 0;
    color: #bc202e; }
  .container-motor h3 {
    text-transform: uppercase; }
  .container-motor .emergency {
    grid-area: emergency;
    background-color: #1a2139;
    color: white;
    padding: 2rem 10%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 32px;
    grid-template-areas: "emergency-left  emergency-right "; }
    @media only screen and (min-width: 112.5em) {
      .container-motor .emergency {
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: ". emergency-left emergency-left emergency-left emergency-right emergency-right emergency-right ."; } }
    @media only screen and (max-width: 75em) {
      .container-motor .emergency {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, min-content);
        grid-gap: 32px;
        grid-template-areas: "emergency-left  emergency-left" "emergency-right emergency-right"; } }
    @media only screen and (max-width: 64em) {
      .container-motor .emergency {
        width: 100%;
        padding: 2rem; } }
    @media only screen and (max-width: 37.5em) {
      .container-motor .emergency {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, min-content);
        grid-gap: 32px;
        grid-template-areas: "emergency-left  emergency-left" "emergency-right emergency-right"; } }
    .container-motor .emergency .emergency-left {
      grid-area: emergency-left; }
      .container-motor .emergency .emergency-left .emergency-left-p {
        font-size: 2rem;
        font-weight: 600; }
    .container-motor .emergency .emergency-right {
      grid-area: emergency-right; }
      .container-motor .emergency .emergency-right p {
        font-size: 1.5rem; }

.container-opener {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr repeat(7, minmax-content);
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor ." ". more more more more more more more more more more more" "emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency" ". logos logos logos logos logos logos logos logos logos logos ." "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; }
  @media only screen and (min-width: 112.5em) {
    .container-opener {
      grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". . . article-motor article-motor article-motor article-motor article-motor article-motor . . ." ". . . more more more more more more more more more" "emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency" ". . logos logos logos logos logos logos logos logos . ." "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 75em) {
    .container-opener {
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" "article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor" "more more more more more more more more" "emergency emergency emergency emergency emergency emergency emergency emergency" "logos logos logos logos logos logos logos logos" "form form form form form form form form" "footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 64em) {
    .container-opener {
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" "article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor" "more more more more more more more more" "emergency emergency emergency emergency emergency emergency emergency emergency" "logos logos logos logos logos logos logos logos" "form form form form form form form form" "footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 51.25em) {
    .container-opener {
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" "article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor" "more more more more more more more more" "emergency emergency emergency emergency emergency emergency emergency emergency" "logos logos logos logos logos logos logos logos" "form form form form form form form form" "footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 37.5em) {
    .container-opener {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0;
      grid-template-areas: "bar bar bar bar" "bar2 bar2 bar2 bar2" "article-motor article-motor article-motor article-motor" "more more more more" "emergency emergency emergency emergency" "logos logos logos logos" "form form form form" "footer footer footer footer"; } }
  .container-opener .bar2 {
    grid-area: bar2;
    margin-top: 136px;
    background: url("../img/Garage-Door-Motor-Repair-Houston-TX.png") no-repeat center top;
    background-size: cover;
    height: auto;
    border-top: solid 5px #bc202e;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: ". bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder .";
    height: auto;
    border-bottom: solid 2px #bc202e; }
    @media only screen and (min-width: 112.5em) {
      .container-opener .bar2 {
        grid-template-areas: ". . . bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder . . ."; } }
    @media only screen and (max-width: 75em) {
      .container-opener .bar2 {
        background: url("../img/Garage-Door-Motor-Repair-Houston-TX-t.png") no-repeat right top;
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 64em) {
      .container-opener .bar2 {
        background: url("../img/Garage-Door-Motor-Repair-Houston-TX-t.png") no-repeat right top;
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 51.25em) {
      .container-opener .bar2 {
        background: url("../img/Garage-Door-Motor-Repair-Houston-TX-t.png") no-repeat right top;
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 37.5em) {
      .container-opener .bar2 {
        grid-area: bar2;
        margin-top: 100px;
        background: url("../img/presidential-doors-houston-tx-m.png") no-repeat right top;
        background-size: cover;
        height: auto;
        border-top: solid 5px #bc202e;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder";
        height: auto;
        border-bottom: solid 2px #bc202e;
        padding: 0 1rem 0 2rem; } }
    .container-opener .bar2 .bar2-holder {
      grid-area: bar2-holder;
      padding: 2rem 2rem 3rem 2rem;
      text-shadow: 2px 2px 2px #021950;
      color: white; }
      @media only screen and (max-width: 75em) {
        .container-opener .bar2 .bar2-holder {
          padding: 2rem 0 4rem 0; } }
      @media only screen and (max-width: 51.25em) {
        .container-opener .bar2 .bar2-holder {
          padding: 2rem 0 4rem 0; } }
      @media only screen and (max-width: 37.5em) {
        .container-opener .bar2 .bar2-holder {
          grid-area: bar2-holder;
          padding: 2rem 0;
          text-shadow: 2px 2px 2px #021950;
          color: white; } }
      .container-opener .bar2 .bar2-holder h2 {
        font-size: 3rem;
        color: #f73a18;
        margin-bottom: 1rem; }
        @media only screen and (max-width: 75em) {
          .container-opener .bar2 .bar2-holder h2 {
            font-size: 2rem; } }
        @media only screen and (max-width: 51.25em) {
          .container-opener .bar2 .bar2-holder h2 {
            font-size: 2rem; } }
        @media only screen and (max-width: 37.5em) {
          .container-opener .bar2 .bar2-holder h2 {
            font-size: 2rem;
            line-height: 1;
            margin-bottom: .5rem;
            text-transform: uppercase;
            font-weight: 600; } }
      .container-opener .bar2 .bar2-holder p {
        font-size: 1.5rem;
        width: 75%; }
        @media only screen and (min-width: 112.5em) {
          .container-opener .bar2 .bar2-holder p {
            width: 70%; } }
        @media only screen and (max-width: 75em) {
          .container-opener .bar2 .bar2-holder p {
            font-size: 1.3rem; } }
        @media only screen and (max-width: 51.25em) {
          .container-opener .bar2 .bar2-holder p {
            font-size: 1.2rem; } }
        @media only screen and (max-width: 37.5em) {
          .container-opener .bar2 .bar2-holder p {
            width: 100%;
            font-size: 1rem; } }
  .container-opener .article-motor {
    grid-area: article-motor;
    padding-top: 2rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, min-content);
    grid-gap: 2rem;
    grid-template-areas: "article-motor-1" "article-motor-2" "article-motor-3"; }
    @media only screen and (max-width: 75em) {
      .container-opener .article-motor {
        padding: 2rem; } }
    @media only screen and (max-width: 64em) {
      .container-opener .article-motor {
        padding: 2rem; } }
    @media only screen and (max-width: 51.25em) {
      .container-opener .article-motor {
        padding: 2rem; } }
    @media only screen and (max-width: 37.5em) {
      .container-opener .article-motor {
        padding: 1rem; } }
    .container-opener .article-motor .article-motor-1 {
      grid-area: article-motor-1; }
      @media only screen and (max-width: 64em) {
        .container-opener .article-motor .article-motor-1 {
          padding: 0 1rem; } }
      @media only screen and (max-width: 37.5em) {
        .container-opener .article-motor .article-motor-1 {
          width: 100%; } }
      .container-opener .article-motor .article-motor-1 h3 {
        overflow: hidden; }
        @media only screen and (max-width: 37.5em) {
          .container-opener .article-motor .article-motor-1 h3 {
            font-size: 1.3rem;
            padding: 1rem 1rem 1rem 0; } }
      .container-opener .article-motor .article-motor-1 h3:after {
        content: "";
        display: inline-block;
        height: 0.5em;
        vertical-align: bottom;
        width: 100%;
        margin-right: -100%;
        margin-left: 10px;
        border-top: 4px solid #bc202e; }
      .container-opener .article-motor .article-motor-1 img {
        float: right;
        margin: 2rem;
        border-radius: 16px;
        /* Adjust for more/less rounding */
        /* Clips image and text to the corners */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* Adds depth */
        box-shadow: 0 3px 12px #0003; }
        @media only screen and (max-width: 64em) {
          .container-opener .article-motor .article-motor-1 img {
            float: left;
            width: 50%;
            margin: 0 2rem 2rem 0; } }
        @media only screen and (max-width: 37.5em) {
          .container-opener .article-motor .article-motor-1 img {
            float: left;
            width: 100%;
            margin: 1rem 0; } }
    .container-opener .article-motor .article-motor-2 {
      margin-top: 2rem;
      margin-bottom: 0; }
      @media only screen and (max-width: 64em) {
        .container-opener .article-motor .article-motor-2 {
          float: left;
          margin: 0;
          padding: 0 1rem 2rem 1rem; } }
      @media only screen and (max-width: 37.5em) {
        .container-opener .article-motor .article-motor-2 {
          width: 100%;
          padding: 0 1rem; } }
      .container-opener .article-motor .article-motor-2 ul {
        width: 60%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* Creates 3 equal columns */
        column-gap: 30px;
        /* Space between columns */
        row-gap: 10px; }
        @media only screen and (max-width: 64em) {
          .container-opener .article-motor .article-motor-2 ul {
            width: 100%;
            grid-template-columns: repeat(2, 1fr);
            /* Creates 3 equal columns */
            row-gap: 0px;
            column-gap: 40px; } }
        @media only screen and (max-width: 37.5em) {
          .container-opener .article-motor .article-motor-2 ul {
            width: 100%;
            grid-template-columns: 1fr;
            margin-bottom: 3rem; } }
    .container-opener .article-motor .article-motor-3 {
      grid-area: article-motor-3;
      margin: 0; }
      @media only screen and (max-width: 64em) {
        .container-opener .article-motor .article-motor-3 {
          margin: 0  0 2rem 0; } }
      @media only screen and (max-width: 51.25em) {
        .container-opener .article-motor .article-motor-3 {
          margin: 0; } }
      @media only screen and (max-width: 37.5em) {
        .container-opener .article-motor .article-motor-3 {
          margin: 0; } }
      .container-opener .article-motor .article-motor-3 img {
        float: left;
        margin: 0 3rem 2rem 0;
        border-radius: 16px;
        /* Adjust for more/less rounding */
        /* Clips image and text to the corners */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* Adds depth */
        box-shadow: 0 3px 12px #0003; }
        @media only screen and (max-width: 64em) {
          .container-opener .article-motor .article-motor-3 img {
            width: 50%;
            margin: 0 2rem 2rem 0; } }
        @media only screen and (max-width: 51.25em) {
          .container-opener .article-motor .article-motor-3 img {
            width: 30%;
            margin: 0 2rem 2rem 0; } }
      .container-opener .article-motor .article-motor-3 h4 {
        padding-top: 0;
        overflow: hidden; }
      .container-opener .article-motor .article-motor-3 h4:after {
        content: "";
        display: inline-block;
        height: 0.3em;
        vertical-align: bottom;
        width: 100%;
        margin-right: -100%;
        margin-left: 10px;
        border-top: 2px solid #bc202e; }
      .container-opener .article-motor .article-motor-3 ul {
        position: relative;
        left: 2rem; }
    .container-opener .article-motor .p-long {
      width: 100%;
      text-align: left;
      color: #333e5b;
      font-size: 1.3rem;
      font-weight: 600; }
  .container-opener h3, .container-opener h4, .container-opener h5 {
    font-size: 1.5rem;
    padding: 1rem 1rem 1rem 0;
    color: #bc202e; }
  .container-opener h3 {
    text-transform: uppercase; }
  .container-opener .more {
    grid-area: more;
    padding: 1rem 0 2rem 0;
    background: url("../img/more-background.jpg") no-repeat bottom right;
    background-size: contain;
    background-repeat: no-repeat;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: "m-holder m-holder m-holder m-holder m-holder m-holder m-holder m-holder . . . ."; }
    @media only screen and (max-width: 75em) {
      .container-opener .more {
        padding: 2rem; } }
    @media only screen and (max-width: 64em) {
      .container-opener .more {
        padding: 0 2rem;
        background-size: 60%; } }
    @media only screen and (max-width: 51.25em) {
      .container-opener .more {
        padding: 0 2rem; } }
    @media only screen and (max-width: 37.5em) {
      .container-opener .more {
        background-size: 60%;
        padding: 1rem;
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas: "m-holder m-holder m-holder m-holder"; } }
    .container-opener .more .m-holder {
      grid-area: m-holder; }
      .container-opener .more .m-holder p {
        margin-bottom: 1rem; }
        @media only screen and (max-width: 37.5em) {
          .container-opener .more .m-holder p {
            width: 100%; } }
      .container-opener .more .m-holder ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* Creates 3 equal columns */
        column-gap: 30px;
        /* Space between columns */
        row-gap: 10px;
        margin-bottom: 2rem; }
        @media only screen and (max-width: 64em) {
          .container-opener .more .m-holder ul {
            grid-template-columns: 1f;
            margin-bottom: 3rem; } }
        @media only screen and (max-width: 51.25em) {
          .container-opener .more .m-holder ul {
            grid-template-columns: 1f;
            margin-bottom: 3rem; } }
        @media only screen and (max-width: 37.5em) {
          .container-opener .more .m-holder ul {
            grid-template-columns: 1fr; } }
  .container-opener .emergency {
    grid-area: emergency;
    background-color: #1a2139;
    color: white;
    padding: 2rem 10%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 32px;
    grid-template-areas: "emergency-left emergency-right"; }
    @media only screen and (min-width: 112.5em) {
      .container-opener .emergency {
        grid-template-columns: repeat(8, 1fr);
        grid-gap: 32px;
        grid-template-areas: ". emergency-left  emergency-left  emergency-left emergency-right emergency-right emergency-right ."; } }
    .container-opener .emergency .emergency-left {
      grid-area: emergency-left; }
      .container-opener .emergency .emergency-left .emergency-left-p {
        font-size: 2rem;
        font-weight: 600; }
    .container-opener .emergency .emergency-right {
      grid-area: emergency-right; }
      .container-opener .emergency .emergency-right p {
        font-size: 1.5rem; }

.container-installation {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr repeat(8, minmax-content);
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". . line2 line2 line2 line2 line2 line2 line2 line2 . ." ". article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor ." ". more more more more more more more more more more more" "emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency" ". logos logos logos logos logos logos logos logos logos logos ." "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; }
  @media only screen and (min-width: 118.75em) {
    .container-installation {
      grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". . article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor . ." " . . more-repair more-repair more-repair more-repair more-repair more-repair more-repair more-repair . ." "emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency" ". logos logos logos logos logos logos logos logos logos logos ." "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; } }
  @media only screen and (min-width: 112.5em) {
    .container-installation {
      grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". . . article-motor article-motor article-motor article-motor article-motor article-motor . . ." ". . . more-repair more-repair more-repair more-repair more-repair more-repair .  . ." "emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency" ". . logos logos logos logos logos logos logos logos . ." "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 75em) {
    .container-installation {
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0px 0px;
      grid-auto-flow: row;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". article-motor  article-motor  article-motor  article-motor  article-motor  article-motor." ". more-repair more-repair more-repair more-repair more-repair more-repair more-repair ." "emergency emergency emergency emergency emergency emergency emergency emergency" "logos  logos logos logos logos logos logos logos" "form form form form form form form form" "footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 64em) {
    .container-installation {
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" "article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor" "more-repair more-repair more-repair more-repair more-repair more-repair more-repair more-repair" "emergency emergency emergency emergency emergency emergency emergency emergency" "logos logos logos logos logos logos logos logos" "form form form form form form form form" "footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 51.25em) {
    .container-installation {
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" "article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor" "more-repair more-repair more-repair more-repair more-repair more-repair more-repair more-repair" "emergency emergency emergency emergency emergency emergency emergency emergency" "logos logos logos logos logos logos logos logos" "form form form form form form form form" "footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 37.5em) {
    .container-installation {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0;
      grid-template-areas: "bar bar bar bar" "bar2 bar2 bar2 bar2" "article-motor article-motor article-motor article-motor" "more-repair more-repair more-repair more-repair" "emergency emergency emergency emergency" "logos logos logos logos" "form form form form" "footer footer footer footer"; } }
  .container-installation .bar2 {
    grid-area: bar2;
    margin-top: 136px;
    background: url("../img/Garage-Door-Motor-Repair-Houston-TX.png") no-repeat center top;
    background-size: cover;
    height: auto;
    border-top: solid 5px #bc202e;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: ". bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder .";
    height: auto;
    border-bottom: solid 2px #bc202e; }
    @media only screen and (min-width: 112.5em) {
      .container-installation .bar2 {
        grid-template-areas: ". . . bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder . ."; } }
    @media only screen and (max-width: 75em) {
      .container-installation .bar2 {
        background: url("../img/Garage-Door-Motor-Repair-Houston-TX-t.png") no-repeat right top;
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 64em) {
      .container-installation .bar2 {
        background: url("../img/Garage-Door-Motor-Repair-Houston-TX-t.png") no-repeat right top;
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 51.25em) {
      .container-installation .bar2 {
        background: url("../img/Garage-Door-Motor-Repair-Houston-TX-t.png") no-repeat right top;
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 37.5em) {
      .container-installation .bar2 {
        grid-area: bar2;
        margin-top: 100px;
        background: url("../img/presidential-doors-houston-tx-m.png") no-repeat right top;
        background-size: cover;
        height: auto;
        border-top: solid 5px #bc202e;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder";
        height: auto;
        border-bottom: solid 2px #bc202e;
        padding: 0 1rem 0 2rem; } }
    .container-installation .bar2 .bar2-holder {
      grid-area: bar2-holder;
      padding: 2rem 2rem 3rem 2rem;
      text-shadow: 2px 2px 2px #021950;
      color: white; }
      @media only screen and (min-width: 112.5em) {
        .container-installation .bar2 .bar2-holder {
          grid-template-areas: ". . . bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder . . ."; } }
      @media only screen and (max-width: 75em) {
        .container-installation .bar2 .bar2-holder {
          padding: 2rem 0 4rem 0; } }
      @media only screen and (max-width: 51.25em) {
        .container-installation .bar2 .bar2-holder {
          padding: 2rem 0 4rem 0; } }
      @media only screen and (max-width: 37.5em) {
        .container-installation .bar2 .bar2-holder {
          grid-area: bar2-holder;
          padding: 2rem 0;
          text-shadow: 2px 2px 2px #021950;
          color: white; } }
      .container-installation .bar2 .bar2-holder h2 {
        font-size: 3rem;
        color: #f73a18;
        margin-bottom: 1rem; }
        @media only screen and (max-width: 75em) {
          .container-installation .bar2 .bar2-holder h2 {
            font-size: 2rem; } }
        @media only screen and (max-width: 51.25em) {
          .container-installation .bar2 .bar2-holder h2 {
            font-size: 2rem; } }
        @media only screen and (max-width: 37.5em) {
          .container-installation .bar2 .bar2-holder h2 {
            font-size: 2rem;
            line-height: 1;
            margin-bottom: .5rem;
            text-transform: uppercase;
            font-weight: 600; } }
      .container-installation .bar2 .bar2-holder p {
        font-size: 1.5rem;
        width: 75%; }
        @media only screen and (min-width: 112.5em) {
          .container-installation .bar2 .bar2-holder p {
            width: 70%; } }
        @media only screen and (max-width: 75em) {
          .container-installation .bar2 .bar2-holder p {
            font-size: 1.3rem; } }
        @media only screen and (max-width: 51.25em) {
          .container-installation .bar2 .bar2-holder p {
            font-size: 1.2rem; } }
        @media only screen and (max-width: 37.5em) {
          .container-installation .bar2 .bar2-holder p {
            width: 100%;
            font-size: 1rem; } }
      .container-installation .bar2 .bar2-holder ul {
        list-style: none;
        /* Remove default bullets */
        padding: 0 1.5rem 0 1rem;
        font-size: 1.3rem;
        line-height: 1.4; }
        @media only screen and (max-width: 37.5em) {
          .container-installation .bar2 .bar2-holder ul {
            padding: 0 0 1rem 0;
            font-size: 1rem;
            line-height: 1.4; } }
      .container-installation .bar2 .bar2-holder ul li::before {
        content: "\2713";
        /* Unicode for check mark (✓) */
        color: #f73a18;
        /* Optional: change color */
        font-weight: bold;
        display: inline-block;
        width: 1em;
        /* Adds consistent spacing */
        margin-left: -1em; }
        @media only screen and (max-width: 37.5em) {
          .container-installation .bar2 .bar2-holder ul li::before {
            width: 1.5em;
            margin-left: -1.8em; } }
  .container-installation .article-motor {
    grid-area: article-motor;
    padding-top: 2rem; }
    @media only screen and (max-width: 37.5em) {
      .container-installation .article-motor {
        padding: 1rem; } }
    .container-installation .article-motor .article-motor-1 {
      grid-area: article-motor-1; }
      @media only screen and (max-width: 64em) {
        .container-installation .article-motor .article-motor-1 {
          padding: 0 1rem; } }
      @media only screen and (max-width: 37.5em) {
        .container-installation .article-motor .article-motor-1 {
          width: 100%;
          padding: 0; } }
      .container-installation .article-motor .article-motor-1 h3 {
        overflow: hidden; }
        @media only screen and (max-width: 37.5em) {
          .container-installation .article-motor .article-motor-1 h3 {
            font-size: 1.3rem;
            padding: 0 0 1rem 0; } }
      .container-installation .article-motor .article-motor-1 h3:after {
        content: "";
        display: inline-block;
        height: 0.5em;
        vertical-align: bottom;
        width: 100%;
        margin-right: -100%;
        margin-left: 10px;
        border-top: 4px solid #bc202e; }
      .container-installation .article-motor .article-motor-1 img {
        float: right;
        margin: 2rem;
        border-radius: 16px;
        /* Adjust for more/less rounding */
        /* Clips image and text to the corners */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* Adds depth */
        box-shadow: 0 3px 12px #0003; }
        @media only screen and (max-width: 51.25em) {
          .container-installation .article-motor .article-motor-1 img {
            float: left;
            width: 50%;
            margin: 0 2rem 2rem 0; } }
        @media only screen and (max-width: 37.5em) {
          .container-installation .article-motor .article-motor-1 img {
            float: left;
            width: 100%;
            margin: 1rem 0; } }
    .container-installation .article-motor .article-motor-2 {
      grid-area: article-motor-2;
      margin-top: 2rem; }
      @media only screen and (max-width: 37.5em) {
        .container-installation .article-motor .article-motor-2 {
          margin-top: 0; } }
      @media only screen and (max-width: 37.5em) {
        .container-installation .article-motor .article-motor-2 .text-before-ul {
          padding: 0 0 0 1rem; } }
    .container-installation .article-motor .article-motor-3 {
      grid-area: article-motor-3;
      margin: 3rem 0 5rem 0; }
      @media only screen and (max-width: 37.5em) {
        .container-installation .article-motor .article-motor-3 {
          padding: 0;
          margin: 0; } }
      .container-installation .article-motor .article-motor-3 img {
        float: left;
        margin: 0 3rem 2rem 0;
        border-radius: 16px;
        /* Adjust for more/less rounding */
        /* Clips image and text to the corners */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* Adds depth */
        box-shadow: 0 3px 12px #0003; }
        @media only screen and (max-width: 64em) {
          .container-installation .article-motor .article-motor-3 img {
            float: left;
            width: 50%;
            margin: 0 2rem 2rem 0; } }
        @media only screen and (max-width: 37.5em) {
          .container-installation .article-motor .article-motor-3 img {
            float: left;
            width: 100%;
            margin: 1rem 0; } }
      .container-installation .article-motor .article-motor-3 h4 {
        padding-top: 0;
        overflow: hidden; }
        @media only screen and (max-width: 37.5em) {
          .container-installation .article-motor .article-motor-3 h4 {
            font-size: 1.3rem;
            margin-bottom: 0;
            float: left;
            width: 100%; } }
      .container-installation .article-motor .article-motor-3 h4:after {
        content: "";
        display: inline-block;
        height: 0.3em;
        vertical-align: bottom;
        width: 100%;
        margin-right: -100%;
        margin-left: 10px;
        border-top: 2px solid #bc202e; }
      .container-installation .article-motor .article-motor-3 ul {
        position: relative;
        left: 2rem; }
        @media only screen and (max-width: 37.5em) {
          .container-installation .article-motor .article-motor-3 ul {
            left: 0;
            width: 90%; } }
    .container-installation .article-motor .p-long {
      width: 100%;
      text-align: left;
      color: #333e5b;
      font-size: 1.3rem;
      font-weight: 600; }
  .container-installation h3, .container-installation h4, .container-installation h5 {
    font-size: 1.5rem;
    padding: 1rem 1rem 1rem 0;
    color: #bc202e; }
    @media only screen and (max-width: 37.5em) {
      .container-installation h3, .container-installation h4, .container-installation h5 {
        font-size: 1.3rem;
        padding: 1rem 0; } }
  .container-installation h3 {
    text-transform: uppercase; }
  .container-installation .more {
    grid-area: more;
    padding: 3rem 0;
    background: url("../img/more-background.jpg") no-repeat bottom right;
    background-size: contain;
    background-repeat: no-repeat;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: "m-holder m-holder m-holder m-holder m-holder m-holder m-holder m-holder . . . ."; }
    .container-installation .more .m-holder {
      grid-area: m-holder; }
      .container-installation .more .m-holder p {
        margin-bottom: 1rem; }
      .container-installation .more .m-holder ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* Creates 3 equal columns */
        column-gap: 30px;
        /* Space between columns */
        row-gap: 10px; }
  .container-installation .emergency {
    grid-area: emergency;
    background-color: #1a2139;
    color: white;
    padding: 2rem 10%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 32px;
    grid-template-areas: "emergency-left  emergency-right "; }
    @media only screen and (min-width: 112.5em) {
      .container-installation .emergency {
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: ". emergency-left emergency-left emergency-left emergency-right emergency-right emergency-right ."; } }
    @media only screen and (max-width: 75em) {
      .container-installation .emergency {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, min-content);
        grid-gap: 32px;
        grid-template-areas: "emergency-left  emergency-left" "emergency-right emergency-right"; } }
    @media only screen and (max-width: 64em) {
      .container-installation .emergency {
        width: 100%;
        padding: 2rem; } }
    @media only screen and (max-width: 37.5em) {
      .container-installation .emergency {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, min-content);
        grid-gap: 32px;
        grid-template-areas: "emergency-left  emergency-left" "emergency-right emergency-right"; } }
    .container-installation .emergency .emergency-left {
      grid-area: emergency-left; }
      .container-installation .emergency .emergency-left .emergency-left-p {
        font-size: 2rem;
        font-weight: 600; }
        @media only screen and (max-width: 37.5em) {
          .container-installation .emergency .emergency-left .emergency-left-p {
            font-size: 1.3rem; } }
    .container-installation .emergency .emergency-right {
      grid-area: emergency-right; }
      .container-installation .emergency .emergency-right p {
        font-size: 1.5rem; }

.container-maintainence {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr repeat(6, minmax-content);
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor ." " . more-repair more-repair more-repair more-repair more-repair more-repair more-repair more-repair more-repair more-repair more-repair" "emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency" ". logos logos logos logos logos logos logos logos logos logos ." "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; }
  @media only screen and (min-width: 118.75em) {
    .container-maintainence {
      grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". . article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor . ." " . . more-repair more-repair more-repair more-repair more-repair more-repair more-repair more-repair . ." "emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency" ". logos logos logos logos logos logos logos logos logos logos ." "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; } }
  @media only screen and (min-width: 112.5em) {
    .container-maintainence {
      grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". . . article-motor article-motor article-motor article-motor article-motor article-motor . . ." ". . more-repair more-repair more-repair more-repair more-repair more-repair more-repair more-repair  . ." "emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency" ". . logos logos logos logos logos logos logos logos . ." "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 75em) {
    .container-maintainence {
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0px 0px;
      grid-auto-flow: row;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" "article-motor  article-motor  article-motor  article-motor  article-motor  article-motor  article-motor  article-motor" "more-repair more-repair more-repair more-repair more-repair more-repair more-repair more-repair more-repair" "emergency emergency emergency emergency emergency emergency emergency emergency" "logos  logos logos logos logos logos logos logos" "form form form form form form form form" "footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 64em) {
    .container-maintainence {
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" "article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor" "more-repair more-repair more-repair more-repair more-repair more-repair more-repair more-repair" "emergency emergency emergency emergency emergency emergency emergency emergency" "logos logos logos logos logos logos logos logos" "form form form form form form form form" "footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 51.25em) {
    .container-maintainence {
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" "article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor" "more-repair more-repair more-repair more-repair more-repair more-repair more-repair more-repair" "emergency emergency emergency emergency emergency emergency emergency emergency" "logos logos logos logos logos logos logos logos" "form form form form form form form form" "footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 37.5em) {
    .container-maintainence {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0;
      grid-template-areas: "bar bar bar bar" "bar2 bar2 bar2 bar2" "article-motor article-motor article-motor article-motor" "more-repair more-repair more-repair more-repair" "emergency emergency emergency emergency" "logos logos logos logos" "form form form form" "footer footer footer footer"; } }
  .container-maintainence .bar2 {
    grid-area: bar2;
    margin-top: 136px;
    background: url("../img/Garage-Door-Motor-Repair-Houston-TX.png") no-repeat center top;
    background-size: cover;
    height: auto;
    border-top: solid 5px #bc202e;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: ". bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder .";
    height: auto;
    border-bottom: solid 2px #bc202e; }
    @media only screen and (min-width: 112.5em) {
      .container-maintainence .bar2 {
        grid-template-areas: ". . . bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder . ."; } }
    @media only screen and (max-width: 75em) {
      .container-maintainence .bar2 {
        background: url("../img/Garage-Door-Motor-Repair-Houston-TX-t.png") no-repeat right top;
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 64em) {
      .container-maintainence .bar2 {
        background: url("../img/Garage-Door-Motor-Repair-Houston-TX-t.png") no-repeat right top;
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 51.25em) {
      .container-maintainence .bar2 {
        background: url("../img/Garage-Door-Motor-Repair-Houston-TX-t.png") no-repeat right top;
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 37.5em) {
      .container-maintainence .bar2 {
        grid-area: bar2;
        margin-top: 100px;
        background: url("../img/presidential-doors-houston-tx-m.png") no-repeat right top;
        background-size: cover;
        height: auto;
        border-top: solid 5px #bc202e;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder";
        height: auto;
        border-bottom: solid 2px #bc202e;
        padding: 0 1rem 0 2rem; } }
    .container-maintainence .bar2 .bar2-holder {
      grid-area: bar2-holder;
      padding: 2rem 2rem 3rem 2rem;
      text-shadow: 2px 2px 2px #021950;
      color: white; }
      @media only screen and (max-width: 37.5em) {
        .container-maintainence .bar2 .bar2-holder {
          padding: 2rem 0;
          text-shadow: 2px 2px 2px #021950;
          color: white; } }
      .container-maintainence .bar2 .bar2-holder h2 {
        font-size: 3rem;
        color: #f73a18;
        margin-bottom: 1rem; }
        @media only screen and (max-width: 75em) {
          .container-maintainence .bar2 .bar2-holder h2 {
            font-size: 2rem; } }
        @media only screen and (max-width: 51.25em) {
          .container-maintainence .bar2 .bar2-holder h2 {
            font-size: 2rem; } }
        @media only screen and (max-width: 37.5em) {
          .container-maintainence .bar2 .bar2-holder h2 {
            font-size: 2rem;
            line-height: 1;
            margin-bottom: .5rem;
            text-transform: uppercase;
            font-weight: 600; } }
      .container-maintainence .bar2 .bar2-holder p {
        font-size: 1.5rem;
        width: 75%; }
        @media only screen and (min-width: 112.5em) {
          .container-maintainence .bar2 .bar2-holder p {
            width: 70%; } }
        @media only screen and (max-width: 75em) {
          .container-maintainence .bar2 .bar2-holder p {
            font-size: 1.3rem; } }
        @media only screen and (max-width: 51.25em) {
          .container-maintainence .bar2 .bar2-holder p {
            font-size: 1.2rem; } }
        @media only screen and (max-width: 37.5em) {
          .container-maintainence .bar2 .bar2-holder p {
            width: 100%;
            font-size: 1rem; } }
      .container-maintainence .bar2 .bar2-holder ul {
        list-style: none;
        /* Remove default bullets */
        padding: 0 1.5rem 0 1rem;
        font-size: 1.3rem;
        line-height: 1.4; }
        @media only screen and (max-width: 37.5em) {
          .container-maintainence .bar2 .bar2-holder ul {
            padding: 0 0 1rem 0;
            font-size: 1rem;
            line-height: 1.4; } }
      .container-maintainence .bar2 .bar2-holder ul li::before {
        content: "\2713";
        /* Unicode for check mark (✓) */
        color: #f73a18;
        /* Optional: change color */
        font-weight: bold;
        display: inline-block;
        width: 1em;
        /* Adds consistent spacing */
        margin-left: -1em; }
        @media only screen and (max-width: 37.5em) {
          .container-maintainence .bar2 .bar2-holder ul li::before {
            width: 1.5em;
            margin-left: -1.8em; } }
  .container-maintainence .line2 {
    grid-area: line2;
    text-align: center;
    padding: 2rem 1rem;
    font-size: 2rem; }
  .container-maintainence .article-motor {
    grid-area: article-motor;
    padding-top: 2rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, min-content);
    grid-gap: 0;
    grid-template-areas: "article-motor-1" "article-motor-3"; }
    @media only screen and (max-width: 64em) {
      .container-maintainence .article-motor {
        padding: 1rem; } }
    @media only screen and (max-width: 37.5em) {
      .container-maintainence .article-motor {
        width: 100%;
        padding: 1rem 1rem 0 1rem; } }
    .container-maintainence .article-motor .article-motor-1 {
      grid-area: article-motor-1; }
      @media only screen and (max-width: 64em) {
        .container-maintainence .article-motor .article-motor-1 {
          padding: 0 1rem; } }
      @media only screen and (max-width: 37.5em) {
        .container-maintainence .article-motor .article-motor-1 {
          width: 100%; } }
      .container-maintainence .article-motor .article-motor-1 h3 {
        overflow: hidden; }
        @media only screen and (max-width: 37.5em) {
          .container-maintainence .article-motor .article-motor-1 h3 {
            font-size: 1.3rem;
            padding: 1rem 1rem 1rem 0; } }
      .container-maintainence .article-motor .article-motor-1 h3:after {
        content: "";
        display: inline-block;
        height: 0.5em;
        vertical-align: bottom;
        width: 100%;
        margin-right: -100%;
        margin-left: 10px;
        border-top: 4px solid #bc202e; }
      .container-maintainence .article-motor .article-motor-1 img {
        float: right;
        margin: 2rem;
        border-radius: 16px;
        /* Adjust for more/less rounding */
        /* Clips image and text to the corners */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* Adds depth */
        box-shadow: 0 3px 12px #0003; }
        @media only screen and (max-width: 75em) {
          .container-maintainence .article-motor .article-motor-1 img {
            width: 35%; } }
        @media only screen and (max-width: 64em) {
          .container-maintainence .article-motor .article-motor-1 img {
            float: left;
            width: 50%;
            margin: 0 2rem 2rem 0; } }
        @media only screen and (max-width: 51.25em) {
          .container-maintainence .article-motor .article-motor-1 img {
            width: 35%; } }
        @media only screen and (max-width: 37.5em) {
          .container-maintainence .article-motor .article-motor-1 img {
            float: left;
            width: 100%;
            margin: 1rem 0; } }
    .container-maintainence .article-motor .article-motor-3 {
      grid-area: article-motor-3;
      margin: 4rem 0 5rem 0; }
      .container-maintainence .article-motor .article-motor-3 img {
        float: left;
        margin: 0 3rem 2rem 0;
        border-radius: 16px;
        /* Adjust for more/less rounding */
        /* Clips image and text to the corners */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* Adds depth */
        box-shadow: 0 3px 12px #0003; }
        @media only screen and (max-width: 37.5em) {
          .container-maintainence .article-motor .article-motor-3 img {
            float: left;
            width: 100%;
            margin: 1rem 0; } }
      .container-maintainence .article-motor .article-motor-3 h4 {
        padding-top: 0;
        overflow: hidden; }
      .container-maintainence .article-motor .article-motor-3 h4:after {
        content: "";
        display: inline-block;
        height: 0.3em;
        vertical-align: bottom;
        width: 100%;
        margin-right: -100%;
        margin-left: 10px;
        border-top: 2px solid #bc202e; }
      .container-maintainence .article-motor .article-motor-3 ul {
        position: relative;
        left: 2rem; }
        @media only screen and (max-width: 37.5em) {
          .container-maintainence .article-motor .article-motor-3 ul {
            left: 0;
            width: 90%; } }
    .container-maintainence .article-motor .p-long {
      width: 100%;
      text-align: left;
      color: #333e5b;
      font-size: 1.3rem;
      font-weight: 600; }
  .container-maintainence h3, .container-maintainence h4, .container-maintainence h5 {
    font-size: 1.5rem;
    padding: 1rem 1rem 1rem 0;
    color: #bc202e; }
  .container-maintainence h3 {
    text-transform: uppercase; }
  .container-maintainence .more {
    grid-area: more;
    padding: 3rem 0;
    background: url("../img/more-background.jpg") no-repeat bottom right;
    background-size: contain;
    background-repeat: no-repeat;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: "m-holder m-holder m-holder m-holder m-holder m-holder m-holder m-holder . . . ."; }
    .container-maintainence .more .m-holder {
      grid-area: m-holder; }
      .container-maintainence .more .m-holder p {
        margin-bottom: 1rem; }
      .container-maintainence .more .m-holder ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* Creates 3 equal columns */
        column-gap: 30px;
        /* Space between columns */
        row-gap: 10px; }
  .container-maintainence .emergency {
    grid-area: emergency;
    background-color: #1a2139;
    color: white;
    padding: 2rem 10%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 32px;
    grid-template-areas: "emergency-left  emergency-right "; }
    @media only screen and (min-width: 112.5em) {
      .container-maintainence .emergency {
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: ". emergency-left emergency-left emergency-left emergency-right emergency-right emergency-right ."; } }
    @media only screen and (max-width: 75em) {
      .container-maintainence .emergency {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, min-content);
        grid-gap: 32px;
        grid-template-areas: "emergency-left  emergency-left" "emergency-right emergency-right"; } }
    @media only screen and (max-width: 64em) {
      .container-maintainence .emergency {
        width: 100%;
        padding: 2rem; } }
    @media only screen and (max-width: 37.5em) {
      .container-maintainence .emergency {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, min-content);
        grid-gap: 32px;
        grid-template-areas: "emergency-left  emergency-left" "emergency-right emergency-right"; } }
    .container-maintainence .emergency .emergency-left {
      grid-area: emergency-left; }
      .container-maintainence .emergency .emergency-left .emergency-left-p {
        font-size: 2rem;
        font-weight: 600; }
    .container-maintainence .emergency .emergency-right {
      grid-area: emergency-right; }
      .container-maintainence .emergency .emergency-right p {
        font-size: 1.5rem; }

.container-repair {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr repeat(6, minmax-content);
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor ." " . more-repair more-repair more-repair more-repair more-repair more-repair more-repair more-repair more-repair more-repair more-repair" "emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency" ". logos logos logos logos logos logos logos logos logos logos ." "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; }
  @media only screen and (min-width: 118.75em) {
    .container-repair {
      grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". . . article-motor article-motor article-motor article-motor article-motor article-motor . . ." ". . . more-repair more-repair more-repair more-repair more-repair more-repair more-repair more-repair more-repair" "emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency" ". logos logos logos logos logos logos logos logos logos logos ." "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; } }
  @media only screen and (min-width: 112.5em) {
    .container-repair {
      grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". . . article-motor article-motor article-motor article-motor article-motor article-motor . . ." ". . . more-repair more-repair more-repair more-repair more-repair more-repair more-repair  more-repair more-repair" "emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency" ". . logos logos logos logos logos logos logos logos . ." "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 75em) {
    .container-repair {
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0px 0px;
      grid-auto-flow: row;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" "article-motor  article-motor  article-motor  article-motor  article-motor  article-motor  article-motor  article-motor" "more-repair more-repair more-repair more-repair more-repair more-repair more-repair more-repair more-repair" "emergency emergency emergency emergency emergency emergency emergency emergency" "logos  logos logos logos logos logos logos logos" "form form form form form form form form" "footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 64em) {
    .container-repair {
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" "article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor" "more-repair more-repair more-repair more-repair more-repair more-repair more-repair more-repair" "emergency emergency emergency emergency emergency emergency emergency emergency" "logos logos logos logos logos logos logos logos" "form form form form form form form form" "footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 51.25em) {
    .container-repair {
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" "article-motor article-motor article-motor article-motor article-motor article-motor article-motor article-motor" "more-repair more-repair more-repair more-repair more-repair more-repair more-repair more-repair" "emergency emergency emergency emergency emergency emergency emergency emergency" "logos logos logos logos logos logos logos logos" "form form form form form form form form" "footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 37.5em) {
    .container-repair {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0;
      grid-template-areas: "bar bar bar bar" "bar2 bar2 bar2 bar2" "article-motor article-motor article-motor article-motor" "more-repair more-repair more-repair more-repair" "emergency emergency emergency emergency" "logos logos logos logos" "form form form form" "footer footer footer footer"; } }
  .container-repair .bar2 {
    grid-area: bar2;
    margin-top: 136px;
    background: url("../img/Garage-Door-Motor-Repair-Houston-TX.png") no-repeat center top;
    background-size: cover;
    height: auto;
    border-top: solid 5px #bc202e;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: ". bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder .";
    height: auto;
    border-bottom: solid 2px #bc202e; }
    @media only screen and (min-width: 112.5em) {
      .container-repair .bar2 {
        grid-template-areas: ". . . bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder . ."; } }
    @media only screen and (max-width: 75em) {
      .container-repair .bar2 {
        background: url("../img/Garage-Door-Motor-Repair-Houston-TX-t.png") no-repeat right top;
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 64em) {
      .container-repair .bar2 {
        background: url("../img/Garage-Door-Motor-Repair-Houston-TX-t.png") no-repeat right top;
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 51.25em) {
      .container-repair .bar2 {
        background: url("../img/Garage-Door-Motor-Repair-Houston-TX-t.png") no-repeat right top;
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 37.5em) {
      .container-repair .bar2 {
        grid-area: bar2;
        margin-top: 100px;
        background: url("../img/presidential-doors-houston-tx-m.png") no-repeat right top;
        background-size: cover;
        height: auto;
        border-top: solid 5px #bc202e;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder";
        height: auto;
        border-bottom: solid 2px #bc202e;
        padding: 0 1rem 0 2rem; } }
    .container-repair .bar2 .bar2-holder {
      grid-area: bar2-holder;
      padding: 2rem 2rem 3rem 2rem;
      text-shadow: 2px 2px 2px #021950;
      color: white; }
      @media only screen and (max-width: 37.5em) {
        .container-repair .bar2 .bar2-holder {
          padding: 2rem 0;
          text-shadow: 2px 2px 2px #021950;
          color: white; } }
      .container-repair .bar2 .bar2-holder h2 {
        font-size: 3rem;
        color: #f73a18;
        margin-bottom: 1rem; }
        @media only screen and (max-width: 75em) {
          .container-repair .bar2 .bar2-holder h2 {
            font-size: 2rem; } }
        @media only screen and (max-width: 51.25em) {
          .container-repair .bar2 .bar2-holder h2 {
            font-size: 2rem; } }
        @media only screen and (max-width: 37.5em) {
          .container-repair .bar2 .bar2-holder h2 {
            font-size: 2rem;
            line-height: 1;
            margin-bottom: .5rem;
            text-transform: uppercase;
            font-weight: 600; } }
      .container-repair .bar2 .bar2-holder p {
        font-size: 1.5rem;
        width: 75%; }
        @media only screen and (min-width: 112.5em) {
          .container-repair .bar2 .bar2-holder p {
            width: 70%; } }
        @media only screen and (max-width: 75em) {
          .container-repair .bar2 .bar2-holder p {
            font-size: 1.3rem; } }
        @media only screen and (max-width: 51.25em) {
          .container-repair .bar2 .bar2-holder p {
            font-size: 1.2rem; } }
        @media only screen and (max-width: 37.5em) {
          .container-repair .bar2 .bar2-holder p {
            width: 100%;
            font-size: 1rem; } }
      .container-repair .bar2 .bar2-holder ul {
        list-style: none;
        /* Remove default bullets */
        padding: 0 1.5rem 0 1rem;
        font-size: 1.3rem;
        line-height: 1.4; }
        @media only screen and (max-width: 37.5em) {
          .container-repair .bar2 .bar2-holder ul {
            padding: 0 0 1rem 0;
            font-size: 1rem;
            line-height: 1.4; } }
      .container-repair .bar2 .bar2-holder ul li::before {
        content: "\2713";
        /* Unicode for check mark (✓) */
        color: #f73a18;
        /* Optional: change color */
        font-weight: bold;
        display: inline-block;
        width: 1em;
        /* Adds consistent spacing */
        margin-left: -1em; }
        @media only screen and (max-width: 37.5em) {
          .container-repair .bar2 .bar2-holder ul li::before {
            width: 1.5em;
            margin-left: -1.8em; } }
  .container-repair .article-motor {
    grid-area: article-motor;
    padding-top: 2rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(1, min-content);
    grid-gap: 2rem;
    grid-template-areas: "article-motor-1"; }
    @media only screen and (max-width: 64em) {
      .container-repair .article-motor {
        padding: 1rem; } }
    @media only screen and (max-width: 37.5em) {
      .container-repair .article-motor {
        padding: 1rem;
        grid-gap: 0; } }
    .container-repair .article-motor .article-motor-1 {
      grid-area: article-motor-1; }
      @media only screen and (max-width: 64em) {
        .container-repair .article-motor .article-motor-1 {
          padding: 0 1rem; } }
      @media only screen and (max-width: 37.5em) {
        .container-repair .article-motor .article-motor-1 {
          width: 100%;
          padding: 0;
          margin: 0; } }
      .container-repair .article-motor .article-motor-1 h3 {
        overflow: hidden; }
        @media only screen and (max-width: 37.5em) {
          .container-repair .article-motor .article-motor-1 h3 {
            font-size: 1.3rem;
            padding: 1rem 1rem 1rem 0; } }
      .container-repair .article-motor .article-motor-1 h3:after {
        content: "";
        display: inline-block;
        height: 0.5em;
        vertical-align: bottom;
        width: 100%;
        margin-right: -100%;
        margin-left: 10px;
        border-top: 4px solid #bc202e; }
      .container-repair .article-motor .article-motor-1 img {
        float: right;
        margin: 2rem;
        border-radius: 16px;
        /* Adjust for more/less rounding */
        /* Clips image and text to the corners */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* Adds depth */
        box-shadow: 0 3px 12px #0003; }
        @media only screen and (max-width: 64em) {
          .container-repair .article-motor .article-motor-1 img {
            float: left;
            width: 50%;
            margin: 0 2rem 2rem 0; } }
        @media only screen and (max-width: 37.5em) {
          .container-repair .article-motor .article-motor-1 img {
            float: left;
            width: 100%;
            margin: 1rem 0; } }
    .container-repair .article-motor .article-motor-2 {
      grid-area: article-motor-2;
      margin-top: 2rem;
      margin-bottom: 3rem; }
      @media only screen and (max-width: 64em) {
        .container-repair .article-motor .article-motor-2 {
          float: left;
          margin: 0;
          padding: 0 1rem; } }
      @media only screen and (max-width: 37.5em) {
        .container-repair .article-motor .article-motor-2 {
          width: 100%;
          padding: 0 2rem;
          margin-top: 0; } }
      .container-repair .article-motor .article-motor-2 ul {
        width: 60%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* Creates 3 equal columns */
        column-gap: 30px;
        /* Space between columns */
        row-gap: 10px; }
        @media only screen and (max-width: 64em) {
          .container-repair .article-motor .article-motor-2 ul {
            width: 100%; } }
        @media only screen and (max-width: 37.5em) {
          .container-repair .article-motor .article-motor-2 ul {
            width: 100%;
            padding-bottom: 3rem; } }
    .container-repair .article-motor .article-motor-3 {
      grid-area: article-motor-3;
      margin: 4rem 0 5rem 0; }
      .container-repair .article-motor .article-motor-3 img {
        float: left;
        margin: 0 3rem 2rem 0;
        border-radius: 16px;
        /* Adjust for more/less rounding */
        /* Clips image and text to the corners */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* Adds depth */
        box-shadow: 0 3px 12px #0003; }
      .container-repair .article-motor .article-motor-3 h4 {
        padding-top: 0;
        overflow: hidden; }
      .container-repair .article-motor .article-motor-3 h4:after {
        content: "";
        display: inline-block;
        height: 0.3em;
        vertical-align: bottom;
        width: 100%;
        margin-right: -100%;
        margin-left: 10px;
        border-top: 2px solid #bc202e; }
      .container-repair .article-motor .article-motor-3 ul {
        position: relative;
        left: 2rem; }
    .container-repair .article-motor .p-long {
      width: 100%;
      text-align: left;
      color: #333e5b;
      font-size: 1.3rem;
      font-weight: 600; }
  .container-repair h3, .container-repair h4, .container-repair h5 {
    font-size: 1.5rem;
    padding: 1rem 1rem 1rem 0;
    color: #bc202e; }
  .container-repair h3 {
    text-transform: uppercase; }
  .container-repair .more-repair {
    grid-area: more-repair;
    background-image: url("../img/more-background2.jpg");
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 3rem; }
    @media only screen and (max-width: 64em) {
      .container-repair .more-repair {
        width: 100%;
        padding: 3rem; } }
    @media only screen and (max-width: 37.5em) {
      .container-repair .more-repair {
        width: 100%;
        padding: 0 1rem 3rem 1rem; } }
    .container-repair .more-repair p {
      width: 60%; }
      @media only screen and (max-width: 37.5em) {
        .container-repair .more-repair p {
          width: 100%; } }
    .container-repair .more-repair ul {
      padding-bottom: 3rem; }
  .container-repair .emergency {
    grid-area: emergency;
    background-color: #1a2139;
    color: white;
    padding: 2rem 10%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 32px;
    grid-template-areas: "emergency-left  emergency-right "; }
    @media only screen and (min-width: 112.5em) {
      .container-repair .emergency {
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: ". emergency-left emergency-left emergency-left emergency-right emergency-right emergency-right ."; } }
    @media only screen and (max-width: 75em) {
      .container-repair .emergency {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, min-content);
        grid-gap: 32px;
        grid-template-areas: "emergency-left  emergency-left" "emergency-right emergency-right"; } }
    @media only screen and (max-width: 64em) {
      .container-repair .emergency {
        width: 100%;
        padding: 2rem; } }
    @media only screen and (max-width: 37.5em) {
      .container-repair .emergency {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, min-content);
        grid-gap: 32px;
        grid-template-areas: "emergency-left  emergency-left" "emergency-right emergency-right"; } }
    .container-repair .emergency .emergency-left {
      grid-area: emergency-left; }
      .container-repair .emergency .emergency-left .emergency-left-p {
        font-size: 2rem;
        font-weight: 600; }
    .container-repair .emergency .emergency-right {
      grid-area: emergency-right; }
      .container-repair .emergency .emergency-right p {
        font-size: 1.5rem; }

.container-commercial {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr repeat(6, minmax-content);
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". article-commercial article-commercial article-commercial article-commercial article-commercial article-commercial article-commercial article-commercial article-commercial article-commercial  ." "emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency" ". logos logos logos logos logos logos logos logos logos logos ." "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; }
  @media only screen and (min-width: 112.5em) {
    .container-commercial {
      grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". . . article-commercial article-commercial article-commercial article-commercial article-commercial article-commercial . .  ." "emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency" ". . logos logos logos logos logos logos logos logos . ." "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 75em) {
    .container-commercial {
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0px 0px;
      grid-auto-flow: row;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" "article-commercial article-commercial article-commercial article-commercial article-commercial article-commercial article-commercial article-commercial" "emergency emergency emergency emergency emergency emergency emergency emergency" "logos  logos logos logos logos logos logos logos" "form form form form form form form form" "footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 64em) {
    .container-commercial {
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0px 0px;
      grid-auto-flow: row;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" "article-commercial article-commercial article-commercial article-commercial article-commercial article-commercial article-commercial article-commercial" "emergency emergency emergency emergency emergency emergency emergency emergency" "logos  logos logos logos logos logos logos logos" "form form form form form form form form" "footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 51.25em) {
    .container-commercial {
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0px 0px;
      grid-auto-flow: row;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" "article-commercial article-commercial article-commercial article-commercial article-commercial article-commercial article-commercial article-commercial" "emergency emergency emergency emergency emergency emergency emergency emergency" "logos  logos logos logos logos logos logos logos" "form form form form form form form form" "footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 37.5em) {
    .container-commercial {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" "article-commercial article-commercial article-commercial article-commercial" "emergency emergency emergency emergency" "logos  logos logos logos" "form form form form" "footer footer footer footer"; } }
  .container-commercial .bar2 {
    grid-area: bar2;
    margin-top: 136px;
    background: url("../img/Garage-Door-Motor-Repair-Houston-TX.png") no-repeat center top;
    background-size: cover;
    height: auto;
    border-top: solid 5px #bc202e;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: ". bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder .";
    height: auto;
    border-bottom: solid 2px #bc202e; }
    @media only screen and (min-width: 112.5em) {
      .container-commercial .bar2 {
        grid-template-areas: ". . . bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder . ."; } }
    @media only screen and (max-width: 75em) {
      .container-commercial .bar2 {
        background: url("../img/Garage-Door-Motor-Repair-Houston-TX-t.png") no-repeat right top;
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 64em) {
      .container-commercial .bar2 {
        background: url("../img/Garage-Door-Motor-Repair-Houston-TX-t.png") no-repeat right top;
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 51.25em) {
      .container-commercial .bar2 {
        background: url("../img/Garage-Door-Motor-Repair-Houston-TX-t.png") no-repeat right top;
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 37.5em) {
      .container-commercial .bar2 {
        grid-area: bar2;
        margin-top: 100px;
        background: url("../img/presidential-doors-houston-tx-m.png") no-repeat right top;
        background-size: cover;
        height: auto;
        border-top: solid 5px #bc202e;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder";
        height: auto;
        border-bottom: solid 2px #bc202e;
        padding: 0 1rem 0 2rem; } }
    .container-commercial .bar2 .bar2-holder {
      grid-area: bar2-holder;
      padding: 2rem 2rem 3rem 2rem;
      text-shadow: 2px 2px 2px #021950;
      color: white; }
      @media only screen and (min-width: 112.5em) {
        .container-commercial .bar2 .bar2-holder {
          grid-template-areas: ". . . bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder . . ."; } }
      @media only screen and (max-width: 37.5em) {
        .container-commercial .bar2 .bar2-holder {
          padding: 2rem 0;
          text-shadow: 2px 2px 2px #021950;
          color: white; } }
      .container-commercial .bar2 .bar2-holder h2 {
        font-size: 3rem;
        color: #f73a18;
        margin-bottom: 1rem; }
        @media only screen and (max-width: 75em) {
          .container-commercial .bar2 .bar2-holder h2 {
            font-size: 2rem; } }
        @media only screen and (max-width: 51.25em) {
          .container-commercial .bar2 .bar2-holder h2 {
            font-size: 2rem; } }
        @media only screen and (max-width: 37.5em) {
          .container-commercial .bar2 .bar2-holder h2 {
            font-size: 2rem;
            line-height: 1;
            margin-top: 1rem;
            margin-bottom: .5rem;
            text-transform: uppercase;
            font-weight: 600; } }
      .container-commercial .bar2 .bar2-holder p {
        font-size: 1.5rem;
        width: 75%; }
        @media only screen and (min-width: 112.5em) {
          .container-commercial .bar2 .bar2-holder p {
            width: 70%; } }
        @media only screen and (max-width: 75em) {
          .container-commercial .bar2 .bar2-holder p {
            font-size: 1.3rem; } }
        @media only screen and (max-width: 51.25em) {
          .container-commercial .bar2 .bar2-holder p {
            font-size: 1.2rem; } }
        @media only screen and (max-width: 37.5em) {
          .container-commercial .bar2 .bar2-holder p {
            width: 100%;
            font-size: 1rem; } }
      .container-commercial .bar2 .bar2-holder ul {
        list-style: none;
        /* Remove default bullets */
        padding: 0 1.5rem 0 1rem;
        font-size: 1.3rem;
        line-height: 1.4; }
        @media only screen and (max-width: 37.5em) {
          .container-commercial .bar2 .bar2-holder ul {
            padding: 0 0 1rem 0;
            font-size: 1rem;
            line-height: 1.4; } }
      .container-commercial .bar2 .bar2-holder ul li::before {
        content: "\2713";
        /* Unicode for check mark (✓) */
        color: #f73a18;
        /* Optional: change color */
        font-weight: bold;
        display: inline-block;
        width: 1em;
        /* Adds consistent spacing */
        margin-left: -1em; }
        @media only screen and (max-width: 37.5em) {
          .container-commercial .bar2 .bar2-holder ul li::before {
            width: 1.5em;
            margin-left: -1.8em; } }
  .container-commercial .article-commercial {
    grid-area: article-commercial;
    padding: 1rem 2rem; }
    @media only screen and (max-width: 64em) {
      .container-commercial .article-commercial {
        padding: 0 1rem; } }
    @media only screen and (max-width: 37.5em) {
      .container-commercial .article-commercial {
        width: 100%; } }
    .container-commercial .article-commercial .article-motor-1 h3 {
      overflow: hidden; }
      @media only screen and (max-width: 37.5em) {
        .container-commercial .article-commercial .article-motor-1 h3 {
          font-size: 1.3rem;
          padding: 1rem 1rem 1rem 0; } }
    .container-commercial .article-commercial .article-motor-1 h3:after {
      content: "";
      display: inline-block;
      height: 0.5em;
      vertical-align: bottom;
      width: 100%;
      margin-right: -100%;
      margin-left: 10px;
      border-top: 4px solid #bc202e; }
    .container-commercial .article-commercial .article-motor-1 img {
      float: right;
      margin: 1rem 2rem;
      border-radius: 16px;
      /* Adjust for more/less rounding */
      /* Clips image and text to the corners */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      /* Adds depth */
      box-shadow: 0 3px 12px #0003; }
      @media only screen and (max-width: 64em) {
        .container-commercial .article-commercial .article-motor-1 img {
          float: left;
          width: 50%;
          margin: 0 2rem 2rem 0; } }
      @media only screen and (max-width: 37.5em) {
        .container-commercial .article-commercial .article-motor-1 img {
          float: left;
          width: 100%;
          margin: 1rem 0; } }
    .container-commercial .article-commercial .article-motor-1 ul {
      width: 50%; }
    .container-commercial .article-commercial .article-motor-2 {
      padding: 0; }
      .container-commercial .article-commercial .article-motor-2 img {
        max-height: 360px;
        width: auto;
        float: left;
        border-radius: 16px;
        box-shadow: 0 3px 12px #0003;
        margin: 0 3rem 1rem 0; }
        @media only screen and (max-width: 64em) {
          .container-commercial .article-commercial .article-motor-2 img {
            float: left;
            width: 50%;
            margin: 0 2rem 2rem 0; } }
        @media only screen and (max-width: 37.5em) {
          .container-commercial .article-commercial .article-motor-2 img {
            float: left;
            width: 100%;
            margin: 1rem 0; } }
      .container-commercial .article-commercial .article-motor-2 ul {
        position: relative;
        left: 2rem; }
    .container-commercial .article-commercial .article-motor-3 {
      margin: 4rem 0 5rem 0; }
      .container-commercial .article-commercial .article-motor-3 img {
        float: right;
        margin: 0 3rem 2rem 0;
        border-radius: 16px;
        /* Adjust for more/less rounding */
        box-shadow: 0 3px 12px #0003; }
        @media only screen and (max-width: 64em) {
          .container-commercial .article-commercial .article-motor-3 img {
            float: left;
            width: 50%;
            margin: 0 2rem 2rem 0; } }
        @media only screen and (max-width: 37.5em) {
          .container-commercial .article-commercial .article-motor-3 img {
            float: left;
            width: 100%;
            margin: 0 0 1rem 0; } }
      .container-commercial .article-commercial .article-motor-3 h4 {
        padding-top: 0;
        overflow: hidden; }
      .container-commercial .article-commercial .article-motor-3 .btn-hover {
        margin: 1rem 0 2rem 0; }
    .container-commercial .article-commercial .p-long {
      width: 100%;
      text-align: left;
      color: #333e5b;
      font-size: 1.3rem;
      font-weight: 600; }
  .container-commercial h3, .container-commercial h4, .container-commercial h5 {
    font-size: 1.5rem;
    padding: 1rem 1rem 1rem 0;
    color: #bc202e; }
  .container-commercial h3 {
    text-transform: uppercase; }
  .container-commercial .emergency {
    grid-area: emergency;
    background-color: #1a2139;
    color: white;
    padding: 2rem 10%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 32px;
    grid-template-areas: "emergency-left  emergency-right "; }
    @media only screen and (min-width: 112.5em) {
      .container-commercial .emergency {
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: ". emergency-left emergency-left emergency-left emergency-right emergency-right emergency-right ."; } }
    @media only screen and (max-width: 75em) {
      .container-commercial .emergency {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, min-content);
        grid-gap: 32px;
        grid-template-areas: "emergency-left  emergency-left" "emergency-right emergency-right"; } }
    @media only screen and (max-width: 64em) {
      .container-commercial .emergency {
        width: 100%;
        padding: 2rem; } }
    @media only screen and (max-width: 37.5em) {
      .container-commercial .emergency {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, min-content);
        grid-gap: 32px;
        grid-template-areas: "emergency-left  emergency-left" "emergency-right emergency-right"; } }
    .container-commercial .emergency .emergency-left {
      grid-area: emergency-left; }
      .container-commercial .emergency .emergency-left .emergency-left-p {
        font-size: 2rem;
        font-weight: 600; }
    .container-commercial .emergency .emergency-right {
      grid-area: emergency-right; }
      .container-commercial .emergency .emergency-right p {
        font-size: 1.5rem; }

.container-gates {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr repeat(8, minmax-content);
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". article-gates article-gates article-gates article-gates article-gates article-gates article-gates article-gates article-gates article-gates  ." ". more more more more more more more more more more more" "emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency" ". logos logos logos logos logos logos logos logos logos logos ." "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; }
  @media only screen and (min-width: 118.75em) {
    .container-gates {
      grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". . article-gates article-gates article-gates article-gates article-gates article-gates article-gates article-gates .  ." ". . more more more more more more more more . ." "emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency" ". . logos logos logos logos logos logos logos logos . ." "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; } }
  @media only screen and (min-width: 112.5em) {
    .container-gates {
      grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". . . article-gates article-gates article-gates article-gates article-gates article-gates . .  ." ". . . more more more more more more . . ." "emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency emergency" ". . logos logos logos logos logos logos logos logos . ." "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 75em) {
    .container-gates {
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0px 0px;
      grid-auto-flow: row;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". article-gates article-gates article-gates article-gates article-gates article-gates  ." ".  more more more more more more ." "emergency emergency emergency emergency emergency emergency emergency emergency" "logos  logos logos logos logos logos logos logos" "form form form form form form form form" "footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 64em) {
    .container-gates {
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" "article-gates article-gates article-gates article-gates article-gates article-gates article-gates  article-gates" "more  more more more more more more more" "emergency emergency emergency emergency emergency emergency emergency emergency" "logos logos logos logos logos logos logos logos" "form form form form form form form form" "footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 51.25em) {
    .container-gates {
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" "article-gates article-gates article-gates article-gates article-gates article-gates article-gates  article-gates" "more  more more more more more more more" "emergency emergency emergency emergency emergency emergency emergency emergency" "logos logos logos logos logos logos logos logos" "form form form form form form form form" "footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 37.5em) {
    .container-gates {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" "article-gates article-gates article-gates article-gates" "more  more more more more more more more" "emergency emergency emergency emergency emergency emergency emergency emergency" "logos logos logos logos logos logos logos logos" "form form form form form form form form" "footer footer footer footer footer footer footer footer"; } }
  .container-gates .bar2 {
    grid-area: bar2;
    margin-top: 136px;
    background: url("../img/Gates-Installation-Service-houston-tx.png") no-repeat bottom;
    background-size: cover;
    height: auto;
    border-top: solid 5px #bc202e;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: ". bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder .";
    height: auto;
    border-bottom: solid 2px #bc202e; }
    @media only screen and (min-width: 112.5em) {
      .container-gates .bar2 {
        grid-template-areas: ". . . bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder . . ."; } }
    @media only screen and (max-width: 75em) {
      .container-gates .bar2 {
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 64em) {
      .container-gates .bar2 {
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 51.25em) {
      .container-gates .bar2 {
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 37.5em) {
      .container-gates .bar2 {
        grid-area: bar2;
        margin-top: 100px;
        background-size: cover;
        height: auto;
        border-top: solid 5px #bc202e;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder";
        height: auto;
        border-bottom: solid 2px #bc202e;
        padding: 0 1rem 0 2rem; } }
    .container-gates .bar2 .bar2-holder {
      grid-area: bar2-holder;
      padding: 2rem 2rem 3rem 2rem;
      text-shadow: 2px 2px 2px #021950;
      color: white; }
      @media only screen and (max-width: 75em) {
        .container-gates .bar2 .bar2-holder {
          padding: 2rem 2rem 3rem 2rem; } }
      @media only screen and (max-width: 51.25em) {
        .container-gates .bar2 .bar2-holder {
          padding: 2rem 2rem 3rem 2rem; } }
      @media only screen and (max-width: 37.5em) {
        .container-gates .bar2 .bar2-holder {
          grid-area: bar2-holder;
          padding: 2rem 0;
          text-shadow: 2px 2px 2px #021950;
          color: white; } }
      .container-gates .bar2 .bar2-holder h2 {
        font-size: 3rem;
        color: #f73a18;
        margin-bottom: 1rem; }
        @media only screen and (max-width: 75em) {
          .container-gates .bar2 .bar2-holder h2 {
            font-size: 2rem; } }
        @media only screen and (max-width: 51.25em) {
          .container-gates .bar2 .bar2-holder h2 {
            font-size: 2rem; } }
        @media only screen and (max-width: 37.5em) {
          .container-gates .bar2 .bar2-holder h2 {
            font-size: 2rem;
            line-height: 1;
            margin-top: 1rem;
            margin-bottom: .5rem;
            text-transform: uppercase;
            font-weight: 600; } }
      .container-gates .bar2 .bar2-holder p {
        font-size: 1.5rem;
        width: 75%; }
        @media only screen and (min-width: 112.5em) {
          .container-gates .bar2 .bar2-holder p {
            width: 70%; } }
        @media only screen and (max-width: 75em) {
          .container-gates .bar2 .bar2-holder p {
            font-size: 1.3rem; } }
        @media only screen and (max-width: 51.25em) {
          .container-gates .bar2 .bar2-holder p {
            font-size: 1.2rem; } }
        @media only screen and (max-width: 37.5em) {
          .container-gates .bar2 .bar2-holder p {
            width: 100%;
            font-size: 1rem; } }
      .container-gates .bar2 .bar2-holder ul {
        list-style: none;
        /* Remove default bullets */
        padding: 0 1.5rem 0 1rem;
        font-size: 1.3rem;
        line-height: 1.4; }
        @media only screen and (max-width: 37.5em) {
          .container-gates .bar2 .bar2-holder ul {
            padding: 0 0 1rem 0;
            font-size: 1rem;
            line-height: 1.4; } }
      .container-gates .bar2 .bar2-holder ul li::before {
        content: "\2713";
        /* Unicode for check mark (✓) */
        color: #f73a18;
        /* Optional: change color */
        font-weight: bold;
        display: inline-block;
        width: 1em;
        /* Adds consistent spacing */
        margin-left: -1em; }
        @media only screen and (max-width: 37.5em) {
          .container-gates .bar2 .bar2-holder ul li::before {
            width: 1.5em;
            margin-left: -1.8em; } }
  .container-gates .article-gates {
    grid-area: article-gates;
    padding-top: 2rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, minmax);
    grid-gap: 32px;
    grid-template-areas: "gate-main gate-main gate-main gate-main" "gate-commercial gate-commercial gate-residential gate-residential"; }
    @media only screen and (max-width: 75em) {
      .container-gates .article-gates {
        padding: 2rem; } }
    @media only screen and (max-width: 64em) {
      .container-gates .article-gates {
        padding: 2rem; } }
    @media only screen and (max-width: 51.25em) {
      .container-gates .article-gates {
        padding: 2rem; } }
    @media only screen and (max-width: 37.5em) {
      .container-gates .article-gates {
        padding: 1rem;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, minmax);
        grid-gap: 32px;
        grid-template-areas: "gate-main" "gate-commercial" "gate-residential"; } }
    .container-gates .article-gates .gate-main {
      grid-area: gate-main; }
      .container-gates .article-gates .gate-main h3 {
        font-size: 1.5rem;
        padding: 1rem 1rem 1rem 0;
        overflow: hidden; }
        @media only screen and (max-width: 37.5em) {
          .container-gates .article-gates .gate-main h3 {
            font-size: 1.5rem;
            padding: 1rem 1rem 1rem 0; } }
      .container-gates .article-gates .gate-main h3:after {
        content: "";
        display: inline-block;
        height: 0.5em;
        vertical-align: bottom;
        width: 100%;
        margin-right: -100%;
        margin-left: 10px;
        border-top: 4px solid #bc202e; }
      .container-gates .article-gates .gate-main ul {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        /* Creates 3 equal columns */
        column-gap: 30px;
        /* Space between columns */
        row-gap: 10px; }
        @media only screen and (max-width: 64em) {
          .container-gates .article-gates .gate-main ul {
            grid-template-columns: repeat(2, 1fr); } }
        @media only screen and (max-width: 51.25em) {
          .container-gates .article-gates .gate-main ul {
            grid-template-columns: repeat(2, 1fr); } }
        @media only screen and (max-width: 37.5em) {
          .container-gates .article-gates .gate-main ul {
            grid-template-columns: 1fr; } }
      .container-gates .article-gates .gate-main img {
        margin: 4rem 0 3rem 2rem;
        float: right;
        border-radius: 16px;
        box-shadow: 0 3px 12px #0003;
        max-height: 350px; }
        @media only screen and (max-width: 37.5em) {
          .container-gates .article-gates .gate-main img {
            width: 100%;
            margin: 0 0 2rem 2rem; } }
      .container-gates .article-gates .gate-main .btn-hover {
        margin: 1rem 0 3rem 0; }
      .container-gates .article-gates .gate-main .serv {
        padding: 2rem;
        border-radius: 20px;
        box-shadow: 0 3px 12px #0003;
        background-color: #798190;
        color: white; }
        .container-gates .article-gates .gate-main .serv .bold-2 {
          background-color: #798190;
          color: white; }
    .container-gates .article-gates .gate-commercial {
      grid-area: gate-commercial;
      border-radius: 20px;
      box-shadow: 0 3px 12px #0003;
      padding: 32px; }
      .container-gates .article-gates .gate-commercial img {
        float: right;
        width: 80px; }
    .container-gates .article-gates .gate-residential {
      grid-area: gate-residential;
      border-radius: 20px;
      box-shadow: 0 3px 12px #0003;
      padding: 32px; }
      .container-gates .article-gates .gate-residential img {
        float: right;
        width: 80px; }
      .container-gates .article-gates .gate-residential h6, .container-gates .article-gates .gate-residential .bold-2 {
        color: #333e5b; }
    .container-gates .article-gates h3 {
      font-size: 3rem;
      padding: 1rem 1rem 1rem 0;
      color: #bc202e; }
    .container-gates .article-gates h4, .container-gates .article-gates h5, .container-gates .article-gates h6 {
      font-size: 1.5rem;
      padding: 1rem 1rem 1rem 0;
      color: #bc202e; }
    .container-gates .article-gates .bold-2 {
      font-size: 1.3rem; }
  .container-gates .emergency {
    margin-top: 4rem;
    grid-area: emergency;
    background-color: #1a2139;
    color: white;
    padding: 2rem 10%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 32px;
    grid-template-areas: "emergency-left  emergency-right "; }
    @media only screen and (min-width: 112.5em) {
      .container-gates .emergency {
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: ". emergency-left emergency-left emergency-left emergency-right emergency-right emergency-right ."; } }
    @media only screen and (max-width: 75em) {
      .container-gates .emergency {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, min-content);
        grid-gap: 32px;
        grid-template-areas: "emergency-left  emergency-left" "emergency-right emergency-right"; } }
    @media only screen and (max-width: 64em) {
      .container-gates .emergency {
        width: 100%;
        padding: 2rem; } }
    @media only screen and (max-width: 37.5em) {
      .container-gates .emergency {
        margin-top: 2rem;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, min-content);
        grid-gap: 32px;
        grid-template-areas: "emergency-left  emergency-left" "emergency-right emergency-right"; } }
    .container-gates .emergency .emergency-left {
      grid-area: emergency-left; }
      .container-gates .emergency .emergency-left .emergency-left-p {
        font-size: 2rem;
        font-weight: 600; }
    .container-gates .emergency .emergency-right {
      grid-area: emergency-right; }
      .container-gates .emergency .emergency-right p {
        font-size: 1.5rem; }

.container-contact {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr repeat(6, minmax-content);
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". line3 line3 line3 line3 line3 line3 line3 line3 line3 line3 ." ". article-contact article-contact article-contact article-contact article-contact article-contact article-contact article-contact article-contact article-contact ." ". logos logos logos logos logos logos logos logos logos logos ." "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; }
  @media only screen and (min-width: 112.5em) {
    .container-contact {
      grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". . . line3 line3 line3 line3 line3 line3 . . ." ". . . article-contact article-contact article-contact article-contact article-contact article-contact . . ." ". . . logos logos logos logos logos logos . . ." "form form form form form form form form form form form form" "footer footer footer footer footer footer footer footer footer footer footer footer"; } }
  .container-contact .bar2 {
    grid-area: bar2;
    margin-top: 136px;
    background: url("../img/Garage-Door-Motor-Repair-Houston-TX.png") no-repeat center top;
    background-size: cover;
    height: auto;
    border-top: solid 5px #bc202e;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: ". bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder .";
    height: auto;
    border-bottom: solid 2px #bc202e; }
    @media only screen and (min-width: 112.5em) {
      .container-contact .bar2 {
        grid-template-areas: ". . . bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder . ."; } }
    @media only screen and (max-width: 75em) {
      .container-contact .bar2 {
        background: url("../img/Garage-Door-Motor-Repair-Houston-TX-t.png") no-repeat right top;
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 64em) {
      .container-contact .bar2 {
        background: url("../img/Garage-Door-Motor-Repair-Houston-TX-t.png") no-repeat right top;
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 51.25em) {
      .container-contact .bar2 {
        background: url("../img/Garage-Door-Motor-Repair-Houston-TX-t.png") no-repeat right top;
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 37.5em) {
      .container-contact .bar2 {
        grid-area: bar2;
        margin-top: 100px;
        background: url("../img/presidential-doors-houston-tx-m.png") no-repeat right top;
        background-size: cover;
        height: auto;
        border-top: solid 5px #bc202e;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder";
        height: auto;
        border-bottom: solid 2px #bc202e;
        padding: 0 1rem 0 2rem; } }
    .container-contact .bar2 .bar2-holder {
      grid-area: bar2-holder;
      padding: 2rem 2rem 3rem 2rem;
      text-shadow: 2px 2px 2px #021950;
      color: white; }
      @media only screen and (max-width: 37.5em) {
        .container-contact .bar2 .bar2-holder {
          padding: 2rem 0;
          text-shadow: 2px 2px 2px #021950;
          color: white; } }
      .container-contact .bar2 .bar2-holder h2 {
        font-size: 3rem;
        color: #f73a18;
        margin-bottom: 1rem; }
        @media only screen and (max-width: 75em) {
          .container-contact .bar2 .bar2-holder h2 {
            font-size: 2rem; } }
        @media only screen and (max-width: 51.25em) {
          .container-contact .bar2 .bar2-holder h2 {
            font-size: 2rem; } }
        @media only screen and (max-width: 37.5em) {
          .container-contact .bar2 .bar2-holder h2 {
            font-size: 2rem;
            line-height: 1;
            margin-bottom: .5rem;
            text-transform: uppercase;
            font-weight: 600; } }
      .container-contact .bar2 .bar2-holder p {
        font-size: 1.5rem;
        width: 75%; }
        @media only screen and (min-width: 112.5em) {
          .container-contact .bar2 .bar2-holder p {
            width: 70%; } }
        @media only screen and (max-width: 75em) {
          .container-contact .bar2 .bar2-holder p {
            font-size: 1.3rem; } }
        @media only screen and (max-width: 51.25em) {
          .container-contact .bar2 .bar2-holder p {
            font-size: 1.2rem; } }
        @media only screen and (max-width: 37.5em) {
          .container-contact .bar2 .bar2-holder p {
            width: 100%;
            font-size: 1rem; } }
      .container-contact .bar2 .bar2-holder ul {
        list-style: none;
        /* Remove default bullets */
        padding: 0 1.5rem 0 1rem;
        font-size: 1.3rem;
        line-height: 1.4; }
        @media only screen and (max-width: 37.5em) {
          .container-contact .bar2 .bar2-holder ul {
            padding: 0 0 1rem 0;
            font-size: 1rem;
            line-height: 1.4; } }
      .container-contact .bar2 .bar2-holder ul li::before {
        content: "\2713";
        /* Unicode for check mark (✓) */
        color: #f73a18;
        /* Optional: change color */
        font-weight: bold;
        display: inline-block;
        width: 1em;
        /* Adds consistent spacing */
        margin-left: -1em; }
        @media only screen and (max-width: 37.5em) {
          .container-contact .bar2 .bar2-holder ul li::before {
            width: 1.5em;
            margin-left: -1.8em; } }
  .container-contact .line3 {
    grid-area: line3;
    text-align: left;
    padding: 2rem 0;
    font-size: 2rem; }
    .container-contact .line3 h3 {
      overflow: hidden; }
      @media only screen and (max-width: 37.5em) {
        .container-contact .line3 h3 {
          font-size: 1.3rem;
          padding: 1rem 1rem 1rem 0; } }
    .container-contact .line3 h3:after {
      content: "";
      display: inline-block;
      height: 0.5em;
      vertical-align: bottom;
      width: 68%;
      margin-right: -100%;
      margin-left: 10px;
      border-top: 4px solid #bc202e; }
      @media only screen and (max-width: 75em) {
        .container-contact .line3 h3:after {
          width: 30%; } }
      @media only screen and (max-width: 51.25em) {
        .container-contact .line3 h3:after {
          width: 30%; } }
      @media only screen and (max-width: 37.5em) {
        .container-contact .line3 h3:after {
          width: 0; } }
    .container-contact .line3 p {
      font-size: 1.1rem; }
    .container-contact .line3 .bold-c {
      font-size: 1.5rem;
      font-weight: 600;
      color: #bc202e; }
      @media only screen and (max-width: 51.25em) {
        .container-contact .line3 .bold-c {
          font-size: 1.2rem; } }
  .container-contact .article-contact {
    grid-area: article-contact;
    display: grid;
    margin-top: 2rem;
    margin-bottom: 6rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "address phone email hours";
    grid-gap: 32px; }
    @media only screen and (max-width: 98em) {
      .container-contact .article-contact {
        margin-bottom: 3rem;
        margin-top: 0;
        grid-template-row: repeat(2, 1fr);
        grid-template-row: repeat(2, 1fr);
        grid-template-areas: "address phone" "email hours";
        grid-gap: 1rem; } }
    @media only screen and (max-width: 75em) {
      .container-contact .article-contact {
        margin-top: 0;
        grid-template-row: repeat(2, 1fr);
        grid-template-columns: 2fr;
        grid-template-areas: "address phone" "email hours";
        grid-gap: 1rem; } }
    @media only screen and (max-width: 51.25em) {
      .container-contact .article-contact {
        margin-top: 0;
        grid-template-row: repeat(2, 1fr);
        grid-template-columns: 2fr;
        grid-template-areas: "address phone" "email hours";
        grid-gap: 1rem; } }
    @media only screen and (max-width: 37.5em) {
      .container-contact .article-contact {
        margin-top: 0;
        grid-template-row: repeat(4, 1fr);
        grid-template-columns: 1fr;
        grid-template-areas: "address" "phone" "email"  "hours";
        grid-gap: 1rem; } }
    .container-contact .article-contact h3, .container-contact .article-contact h4, .container-contact .article-contact h5 {
      font-size: 1.5rem;
      padding: 1rem 1rem 1rem 0;
      color: #bc202e; }
    .container-contact .article-contact div {
      			 /*border-radius:36px;
      			 border: 1px solid #0003;
        box-shadow: 0 3px 12px #0003;
      			   aspect-ratio: 16/9;*/
      border-radius: 20px;
      /* Adjust for more/less rounding */
      /* Clips image and text to the corners */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      /* Adds depth */
      box-shadow: 0 3px 12px #0003;
      background: white;
      padding: 1.5rem;
      font-size: 1.3rem;
      font-weight: 600;
      text-align: center; }
      .container-contact .article-contact div img {
        float: none;
        padding-right: 1rem;
        margin-bottom: 1rem;
        width: auto;
        height: 60px; }
      .container-contact .article-contact div ul {
        list-style: square;
        padding-left: 1rem; }
      .container-contact .article-contact div .address {
        grid-area: address; }
      .container-contact .article-contact div .phone2 {
        grid-area: phone; }
      .container-contact .article-contact div .email {
        grid-area: address; }
      .container-contact .article-contact div .hours {
        grid-area: hours; }
  .container-contact .logos {
    grid-area: logos; }
  .container-contact .form {
    grid-area: form; }
  .container-contact .footer {
    grid-area: footer; }

.container-policy {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr repeat(6, minmax-content);
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". line3 line3 line3 line3 line3 line3 line3 line3 line3 line3 ." ". article-policy article-policy article-policy article-policy article-policy article-policy article-policy article-policy article-policy article-policy ." "footer footer footer footer footer footer footer footer footer footer footer footer"; }
  @media only screen and (min-width: 112.5em) {
    .container-policy {
      grid-template-areas: "bar bar bar bar bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" ". . . line3 line3 line3 line3 line3 line3 . . ." ". . . article-policy article-policy article-policy article-policy article-policy article-policy . . ." "footer footer footer footer footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 75em) {
    .container-policy {
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: 1fr repeat(7, minmax-content);
      gap: 0px 0px;
      grid-auto-flow: row;
      grid-template-areas: "bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" "line3  line3 line3 line3 line3 line3 line3 line3" "article-policy article-policy article-policy article-policy article-policy article-policy article-policy article-policy" "footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 64em) {
    .container-policy {
      grid-template-areas: "bar bar bar bar bar bar bar bar" "bar2 bar2 bar2 bar2 bar2 bar2 bar2 bar2" "line3  line3 line3 line3 line3 line3 line3 line3" "article-policy article-policy article-policy article-policy article-policy article-policy article-policy article-policy" "footer footer footer footer footer footer footer footer"; } }
  @media only screen and (max-width: 37.5em) {
    .container-policy {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: 1fr repeat(7, min-content);
      gap: 0;
      grid-template-areas: "bar bar bar bar" "bar2 bar2 bar2 bar2" "line3  line3 line3 line3" "article-policy article-policy article-policy article-policy article-policy article-policy article-policy article-policy" "footer footer footer footer"; } }
  .container-policy .bar2 {
    grid-area: bar2;
    margin-top: 136px;
    background: url("../img/Garage-Door-Motor-Repair-Houston-TX.png") no-repeat center top;
    background-size: cover;
    height: auto;
    border-top: solid 5px #bc202e;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: ". bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder .";
    height: auto;
    border-bottom: solid 2px #bc202e; }
    @media only screen and (min-width: 112.5em) {
      .container-policy .bar2 {
        grid-template-areas: ". . . bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder . ."; } }
    @media only screen and (max-width: 75em) {
      .container-policy .bar2 {
        background: url("../img/Garage-Door-Motor-Repair-Houston-TX-t.png") no-repeat right top;
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 64em) {
      .container-policy .bar2 {
        background: url("../img/Garage-Door-Motor-Repair-Houston-TX-t.png") no-repeat right top;
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 51.25em) {
      .container-policy .bar2 {
        background: url("../img/Garage-Door-Motor-Repair-Houston-TX-t.png") no-repeat right top;
        grid-template-columns: repeat(8, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder bar2-holder"; } }
    @media only screen and (max-width: 37.5em) {
      .container-policy .bar2 {
        grid-area: bar2;
        margin-top: 100px;
        background: url("../img/presidential-doors-houston-tx-m.png") no-repeat right top;
        background-size: cover;
        height: auto;
        border-top: solid 5px #bc202e;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas: "bar2-holder bar2-holder bar2-holder bar2-holder";
        height: auto;
        border-bottom: solid 2px #bc202e;
        padding: 0 1rem 0 2rem; } }
    .container-policy .bar2 .bar2-holder {
      grid-area: bar2-holder;
      padding: 2rem 2rem 3rem 2rem;
      text-shadow: 2px 2px 2px #021950;
      color: white; }
      @media only screen and (max-width: 37.5em) {
        .container-policy .bar2 .bar2-holder {
          padding: 2rem 0;
          text-shadow: 2px 2px 2px #021950;
          color: white; } }
      .container-policy .bar2 .bar2-holder h2 {
        font-size: 3rem;
        color: #f73a18;
        margin-bottom: 1rem; }
        @media only screen and (max-width: 75em) {
          .container-policy .bar2 .bar2-holder h2 {
            font-size: 2rem; } }
        @media only screen and (max-width: 51.25em) {
          .container-policy .bar2 .bar2-holder h2 {
            font-size: 2rem; } }
        @media only screen and (max-width: 37.5em) {
          .container-policy .bar2 .bar2-holder h2 {
            font-size: 2rem;
            line-height: 1;
            margin-bottom: .5rem;
            text-transform: uppercase;
            font-weight: 600; } }
      .container-policy .bar2 .bar2-holder p {
        font-size: 1.5rem;
        width: 75%; }
        @media only screen and (min-width: 112.5em) {
          .container-policy .bar2 .bar2-holder p {
            width: 70%; } }
        @media only screen and (max-width: 75em) {
          .container-policy .bar2 .bar2-holder p {
            font-size: 1.3rem; } }
        @media only screen and (max-width: 51.25em) {
          .container-policy .bar2 .bar2-holder p {
            font-size: 1.2rem; } }
        @media only screen and (max-width: 37.5em) {
          .container-policy .bar2 .bar2-holder p {
            width: 100%;
            font-size: 1rem; } }
      .container-policy .bar2 .bar2-holder ul {
        list-style: none;
        /* Remove default bullets */
        padding: 0 1.5rem 0 1rem;
        font-size: 1rem;
        line-height: 1.4; }
        @media only screen and (max-width: 37.5em) {
          .container-policy .bar2 .bar2-holder ul {
            padding: 0 0 1rem 0;
            font-size: 1rem;
            line-height: 1.4; } }
      .container-policy .bar2 .bar2-holder ul li::before {
        content: "\2713";
        /* Unicode for check mark (✓) */
        color: #f73a18;
        /* Optional: change color */
        font-weight: bold;
        display: inline-block;
        width: 1em;
        /* Adds consistent spacing */
        margin-left: -1em; }
        @media only screen and (max-width: 37.5em) {
          .container-policy .bar2 .bar2-holder ul li::before {
            width: 1.5em;
            margin-left: -1.8em; } }
  .container-policy .line3 {
    grid-area: line3;
    text-align: left;
    padding: 2rem 0;
    font-size: 2rem; }
    .container-policy .line3 h3 {
      overflow: hidden;
      color: #bc202e; }
      @media only screen and (max-width: 75em) {
        .container-policy .line3 h3 {
          padding: 1rem; } }
      @media only screen and (max-width: 51.25em) {
        .container-policy .line3 h3 {
          padding: 1rem; } }
      @media only screen and (max-width: 37.5em) {
        .container-policy .line3 h3 {
          font-size: 1.3rem;
          padding: 0 1rem; } }
    .container-policy .line3 h3:after {
      content: "";
      display: inline-block;
      height: 0.5em;
      vertical-align: bottom;
      width: 40%;
      margin-right: -100%;
      margin-left: 10px;
      border-top: 4px solid #bc202e; }
      @media only screen and (max-width: 75em) {
        .container-policy .line3 h3:after {
          width: 30%; } }
      @media only screen and (max-width: 51.25em) {
        .container-policy .line3 h3:after {
          width: 10%; } }
      @media only screen and (max-width: 37.5em) {
        .container-policy .line3 h3:after {
          width: 0; } }
    .container-policy .line3 p {
      font-size: 1.1rem; }
    .container-policy .line3 .bold-c {
      font-size: 1.5rem;
      font-weight: 600;
      color: #bc202e; }
      @media only screen and (max-width: 51.25em) {
        .container-policy .line3 .bold-c {
          font-size: 1.2rem; } }
  .container-policy .article-policy {
    grid-area: article-policy;
    display: grid;
    margin-top: 2rem;
    margin-bottom: 6rem; }
    @media only screen and (max-width: 75em) {
      .container-policy .article-policy {
        padding: 1rem; } }
    @media only screen and (max-width: 51.25em) {
      .container-policy .article-policy {
        padding: 0 1rem; } }
    @media only screen and (max-width: 37.5em) {
      .container-policy .article-policy {
        padding: 0 1rem; } }
    .container-policy .article-policy h3, .container-policy .article-policy h4, .container-policy .article-policy h5 {
      font-size: 1.5rem;
      padding: 1rem 1rem 1rem 0;
      color: #bc202e; }
    .container-policy .article-policy .footer {
      grid-area: footer; }

.moving-right {
  font-size: 1rem; }