:root {
    --font: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --yellow: #fdd142; 
    --text-color: #50596c;
    --text-color: #04061f;
    --teal: #5ae0d7;
    --red: #e41c2a;
    --green:#027a79;
    --green: hsl(179, 97%, 24%);
    --green2: hsl(179, 97%, 34%);
    --blue: #01a0e2;
    --gray: #6c707d;
    --light-gray: #bcbcbd;
    --black: #04061f;
    --white: #edfdfd;
}
body {
    background: white;
    font-size: 1rem;
}
p {
    margin-top: 1rem;
}
a,
a:visited,
a:link {
    text-decoration: underline;
    color: var(--yellow);
}
a:hover,
a:focus,
a:active {
    text-decoration: none;
    color: var(--yellow);
}
h4 {
    margin-bottom:2rem;
}

h2.logo {
    font-family: 'Times New Roman', serif;
    font-family: 'Courier New', monospace;
    
    font-family: Garamond, serif;
    font-family: Georgia, serif;
    font-size:2rem;
    background-image: url(/user/images/mrmpatarias-logo.png);
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 40px;
}

.overlay h2.logo {
    background-image: none;
}
.header-animated h2.logo {
    margin-top:10px;
}
.logo sup {
  vertical-align: top;
  line-height: inherit;
  position: relative;
  font-size: 1.2rem;
  top: 0.2em;
}

.mobile-logo a {
    text-decoration: none;
    text-align: center;
}
.mobile-logo h2 {
    color: white;
}
.container.grid-lg {
    max-width: 1480px;
}
.dropmenu ul li a {
    font-family: Georgia, serif;
    transition: all 0.2s ease-out;
    border-top: 0.5px solid #fff;
    border-bottom: 0.5px solid #fff;
}
.dropmenu ul li li a:hover {
    border-top: 0.5px solid #888;
    border-bottom: 0.5px solid #888;
    background: #f8f8f8;
}
.dropmenu ul li li a {
    padding-top:1rem;
    padding-bottom:1rem;
}
.dropmenu ul li a.active {
    color:#080808 !important;
}
.dropmenu ul li a:hover {
    color:#080808 !important;
}
.dropmenu ul ul {
    z-index:100;
}
.call-to-action {
    background: var(--green);
    
}
.call-to-action:hover {
    background: var(--green2);
}
.overlay.open {
    opacity: 1;
}
.overlay-menu {
    background: #fff;
}

.overlay-menu ul.treemenu {
    display: block !important;
}
.overlay-menu .toggler {
    display: none;
}
.overlay-menu li {
    background: white;
}
.overlay-menu .treemenu a {
    margin-top: 5px;
    font-size: 1.3rem;
}
.dropmenu ul li.call-to-action a {
    font-family: var(--font);
    color: white !important;
}
.overlay-menu .tree a:link,
.overlay-menu .tree a:visited,
.overlay-menu .tree a {
    font-weight: normal;
    text-decoration: none;
    color: var(--green);
} 
.overlay-menu .tree a:focus,
.overlay-menu .tree a:hover,
.overlay-menu .tree a.active,
.overlay-menu .tree a:active {
    text-decoration: none;
    color: var(--green2) !important;
}
.treemenu li .toggler::before {
    color: var(--yellow);
    font-size: 1.61rem;
}
.treemenu li.tree-empty > .toggler::before {
    content: "";
}
.mobile-menu #toggle span {
    background: var(--green);
}
.mobile-menu #toggle.active span {
    background: var(--yellow);
}
.overlay-menu .call-to-action {
    background: var(--green);
    border: var(--green) 1px solid;
    border-radius: 5px;    
    display: inline-block;
    margin-top: 10px;
}
.overlay-menu .call-to-action a:visited,
.overlay-menu .call-to-action a:link,
.overlay-menu .call-to-action a {
    font-weight: bold !important;
    margin: 5px 10px;
    color: white;
}
.overlay-menu .call-to-action a:hover {
    color: white;
    text-decoration: none;
}
.overlay-menu .call-to-action:hover {
    background: var(--white);
    color: white;
}
.flex {
    display: flex;
}
.grid {
    display: grid;
}
.flex > div {
    flex: 1;
    text-align: center;
}
.center {
    text-align:center;
}
.hero {
    background-size: cover;
    background-repeat: no-repeat, repeat;
}
.header-fixed .hero {
    background-position: 50% 50%;
}
.page-home .hero-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px) {
    .page-home .hero-content {
        grid-template-columns: repeat(1, 1fr);
    }
}
.hero .mrmpatarias  {
    
}
.hero p {
    text-align:center;
    font-family: impact;
    font-size: 4rem;
    line-height: 6rem;
    font-weight:bold;
    color:#fff;
    color:var(--red);
    /* text-shadow: 1px 1px 0px var(--black); */
    margin-top:-15rem;
    text-shadow: 4px 4px 0px white;
}
.hero p span {
    font-family: georgia, serif;
    font-size: 6rem;
}
@media (max-width: 840px) {
    .hero p {
        font-size: 3rem;
        line-height: 4rem;
    }
    .hero p span {
        font-size: 4rem;
    }
} 
.button:focus,
.button:visited,
.button {
    background: var(--green);
    /* box-shadow: 1px 1px 0 var(--black); */
    border: none;
    color: white;
    font-size: 1.2rem;
    font-family: var(--font);
    transition: all 0.3s ease-out;
    padding: 0.5rem 1rem;
    height:auto;
}
a.button:visited,
a.button:link,
a.button {
    color: white;
    text-decoration: none;
}
a.button:hover {
    border-color: white;
    color: white;
    background-color: var(--green2);
}
.module-cards {
    
}

.cards {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3rem;
}
@media (max-width: 768px) {
    .cards {
        grid-template-columns: 1fr;
    }
}
.cards > div {
    padding: 1rem 2rem;
    box-shadow: 2px 2px 4px var(--gray);
    background: white;
    border-radius: 5px;
    transition: 0.3s ease-in;
}
.cards > div:hover {
    padding: 1rem 2rem;
    box-shadow: 8px 8px 8px #888;
    background: white;
    border-radius: 5px;
}

.cards .disc {
    height:50px;
    width:50px;
    margin:0;
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    background: var(--yellow);
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center; 
    justify-content: center;
    padding-bottom:5px;
    transition: 0.3s ease-in;
}
.cards div:hover .disc {
    background: var(--green);
}
.cards img {
    height:100px;
    max-height:100px;
    margin-top:100px;
}
.module-cards p {
    margin: 2rem auto 1rem;
    text-align:center;
    max-width:768px;
}
@media (max-width: 840px) {
    .module-cards p {
        text-align: left;
    }
}
@media (max-width: 480px) {
    .module-service {
        padding-top: 0px;
    }
}
.module-service .flex {
    gap:2rem;
}
.services-image {
    padding-right: 1.61rem;
}
@media (min-width: 840px) {
    .module-service .service-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .services-image {
        padding-right: 0;
    }

}
.module-service .services {
   /* flex:7; */
}
.module-service .services p {
    padding-right: 1.61rem;
}
.module-service .services-image {
    flex:5;
}
.module-service ul {
    margin-left:0;
    padding-right:1.61rem;
}
.module-service li {
  list-style: none;
  padding: 1rem 2rem 1rem 5rem;
  margin: 1rem auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23ffffff' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") no-repeat center center;
  background-position: 2rem center;
  background-size: 2rem;
  background-color: var(--green);
  color: white;
  box-shadow: 2px 2px 0 var(--gray);
  
}
.module-categories .grid {
    grid-template-columns: 1fr;
    gap:2rem;
}
@media (min-width: 480px) {
    .module-categories .grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (min-width: 840px) {
    .module-categories .grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}
.module-categories .grid > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* pushes items to top and bottom *
  align-items:bottom;
  height: 100%; /* optional, ensures consistent height if needed */
}
.inner {
  margin-top: auto; /* pushes the inner block to the bottom */
  display: flex;
  flex-direction: column;
  align-items: start; /* optional */
  align-items: center;
}
.module-categories .grid a,
.module-categories .grid a:link,
.module-categories .grid a:visited {
    display: block;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    width:100%;
    color: var(--green);
    transition: all 200ms ease-out;
}
.module-categories .grid a:hover,
.module-categories .grid a:focus,
.module-categories .grid a:active {
    color: var(--green2);
    
}
.module-categories .grid a:hover svg {
    transform: scale(1.03);
}
.module-categories .grid svg {
    width:70%;
    height: auto;
    margin-bottom: 2rem;
    transition: all 200ms ease-out;

}
img.brand {
    width: 80%;
    box-shadow: 5px 5px 0px #888;
    margin-bottom: 1.61rem;
    margin-top: 1.61rem;
    border: #333 1px solid;
}
.type-category .main .grid > div {
    align-items: center;
}
.module-service li p {
    padding: 2rem 1rem 1rem 5rem;
    font-style: italic;
    font-size: 1rem;
}
.module-brands {
    background: var(--teal);
    background: var(--yellow);
}
.module-brands .flex {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(5, 1fr); /* 5 columns on desktop */
}
@media (max-width: 768px) {
    .module-brands .flex {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
    }
    
}
@media (max-width: 480px) {
    .module-brands .flex {
    grid-template-columns: 1fr; /* 1 columns on mobile */
    }
    
}
.module-brands .flex div {
    box-shadow: 1px 1px 2px #000;
}

.module-brands .flex img {
  display: block;
  max-width: 100%;
  height: auto;
}
.module-brands .container p {
    display: flex;
    max-width: 100%;
}
.contact-wrapper {
    display: flex;
}
@media (max-width: 840px) {
    .contact-wrapper {
        display: block;
}
}
.contact-wrapper > * {
    flex:1;
}
.footer .grid {
    grid-template-columns: 1fr;
}
@media (min-width: 840px) {
    .footer .grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
@media (max-width: 840px) {
    .footer .grid > div {
        margin-bottom: 1.61rem;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    .footer-menu ul {
        margin:0;
    }
}
.footer p {
    color: var(--black);
    text-align: left;
    margin-top: 0;
}
.footer li {
    list-style-type: none;
    text-align: left;
}
.footer li a,
.footer li a:link,
.footer li a:visited {
    color: var(--green);
    text-decoration: none;
}
.footer li a:hover,
.footer li a:active,
.footer li a:focus {
    text-decoration: underline;
}
.footer-phone {
    margin: 0 2rem;
}
.footer-phone a img {
    width: 2rem;
    height: auto;
}
.footer-phone a {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: white;
    background-color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.footer-phone a:hover {
    background-color: var(--green2);
}
.footer-phone-text {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--green);
}
.type-category .main .grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    color:var(--green);
}
@media (max-width: 480px) {
    .type-category .main .grid {
        grid-template-columns: 1fr;
    }
}
.type-category .main .grid > div {
    display: flex;
    flex-direction: column;
    text-align: center;
}
.form-input:focus {
    border-color: var(--green);
}
.btn {
    color: white;
    border-color: var(--green);
    background: var(--green);
}
.btn:focus,
.btn:hover {
    color: white;
    border-color: var(--green2);
    background: var(--green2);
}
.sticky-phone {
    display: none;
}
@media (max-width: 840px) {
  .sticky-phone {
    display: flex;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: transparent;
    padding: 0;
    border: none;
    z-index: 999;
  }

  .sticky-phone img {
    width: 60px;
    height: auto;
    display: block;
  }
}
/*
.module-service li::before {
  content: '';
  display: inline-block;
  top: 10px;
  width: 1.5rem;
  height: 1.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='black' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") no-repeat center center;
  background-size: contain;
  margin-right: 0.5em;
  vertical-align: middle;
  padding-right: 2rem;
}
*/
#gmap-wrapper {
    height: 580px;
}
@media (max-width: 480px) {
    #gmap-wrapper {
        height: 290px;
}   
}