.maincontent {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    border: none;
}

/* -- Services - Main -- */

/**** SERVICES CONTENT ******/

.home-svc-section {
    padding:35px 0px 60px;
    position: relative;
    background-image: url(/imageserver/UserMedia/defender/svc-page-bg-jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    z-index: 1;
    max-width: 100%;
    width: 100%;
}


.home-svc-title {
    text-align: center;
    padding: 40px 5px 20px;
}

.home-svc-title p {
    max-width: 88%;
    margin-left: auto;
    margin-right: auto;
    text-align: start;
}

.svc-text .underline-multi {
    margin: auto;
}

.svc-cards-home {
    max-width: 90%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    gap: 25px;
}

.service-card {
    transition: all .4s cubic-bezier(0.175, 0.885, 0, 1);
    background-color: #fdfdfd;
    width: 22.5%;
    min-width: 280px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 6px 8px 10px -7px rgba(0, 0, 0,0.3);
margin-bottom: 15px;
display: flex;
flex-direction: column;
padding-bottom: 10px;
}

.service-card:hover {
   box-shadow: 0px 30px 18px -8px rgba(0, 0, 0,0.2);
    transform: translateY(-7px);
}


.sc-1 .sc-img, .sc-1 .sc-img-hover {
    background-image: url('/imageserver/UserMedia/americanroofingandsiding/2023/roofing-card01.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.sc-2 .sc-img, .sc-2 .sc-img-hover {
    background-image: url('/imageserver/UserMedia/americanroofingandsiding/2023/siding-card01.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.sc-3 .sc-img, .sc-3 .sc-img-hover {
    background-image: url('/imageserver/UserMedia/americanroofingandsiding/2023/windows-card01.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.sc-4 .sc-img, .sc-4 .sc-img-hover {
    background-image: url('/imageserver/UserMedia/americanroofingandsiding/2023/gutters-card.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


.sc-icon {
    width: 48px;
    height: 48px;
    
}


.sc-img {
  visibility: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 235px;
  border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom: 3px solid #323472;
  
}

.sc-icon-hover {
    position: absolute;
    padding: 16px;
  width: 100%;
  opacity: 0;
  top: 30%;
  font-size: 10em;
}

.sc-img-hover {
  transition: 0.2s all ease-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    position: absolute;
    height: 235px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    top: 0;
    border-bottom: 4px solid #323472;
  
}

.service-card:hover .sc-image-hover {
    border-bottom-color: #ffffff;
}

.sc-info {
z-index: 2;
  background-color: #fff;
  border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
   padding: 16px 24px 24px 24px;
}


.sc-text {
  color: #868686;
}

.sc-title {
    margin-top: 5px;
    margin-bottom: 10px;
}

.service-card:hover,
.service-card:hover .sc-info  {
    background-color: #323472;
    color: #ffffff;
}

.service-card:hover .sc-text {
    color: #ffffff;
}

.service-card .catalog-link {
    display: block;
    width: 200px;
padding: 5px;
border-radius: 10px;
        text-align: center;
margin-top: auto!important;
    background-color: #ad262d;
margin-inline: auto;
}

.service-card .catalog-link:hover {
background: #dcdcdc;
}

.service-card .catalog-link span {
    display: inline;
    max-width: 100%;
    margin: 10px auto 0px;
    font-size: 18px;
    border: none;
    border-radius: 0;
    color: #ffffff;
    padding: 3px;
}

.service-card .catalog-link a {
    color: #ffffff;
font-weight: 600;
}

.service-card .catalog-link a:hover,
.service-card .catalog-link a:hover span {
    color: #323472;
text-decoration: none;
}

/**** Gallery *****/

  .portfolio-wrapper {
  max-width: 92%;
  width: 100%;
  margin-inline: auto;
  }
  
  .gallery-wrapper {
  max-width: 92%;
  width: 100%;
  margin-inline: auto;
  
  }
  
  .box-gallery {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    width: 100%;
    position: relative;
  }
  .box-gallery h3 {
    position: absolute;
    top: -55px;
  }
  .box-gallery .box-gallery-item {
    position: relative;
    height: 250px;
    margin: 0.5%;
    overflow: hidden;
    flex: 0 1 15em;
    transition: all 0.2s ease-in-out;
  
    border-radius: 5px;
  }
  .box-gallery .box-gallery-item i {
    position: absolute;
    bottom: 40%;
    left: 50%;
    margin: 0 0 -28px -28px;
    font-size: 2em !important;
    border-radius: 50%;
    padding: 10px;
    background: var(--accent-color);
    color: #fff;
    opacity: 0;
    transition: all 0.25s;
  }
  .box-gallery .box-gallery-item:hover {
    filter: drop-shadow(4px 4px 6px gray);
    transform: scale(1.05);
  }
  .box-gallery .box-gallery-item:hover i {
    bottom: 50%;
    opacity: 1;
  }
  .box-gallery .box-gallery-item:hover figure {
    opacity: 0.6;
  }
  .box-gallery .box-gallery-item figure {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    background-size: cover;
  }
  .box-gallery .box-gallery-item figure:hover {
    filter: drop-shadow(4px 4px 6px gray);
    transform: scale(1.05);
  }/*# sourceMappingURL=Untitled-1.css.map */