@import "https://fonts.googleapis.com/css?family=Open+Sans:800&display=swap";
* {
   margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;          }
:root {
   /* --gradient: linear-gradient(45deg, #ff3366, #ff6b6b, #4834d4, #686de0); */
   --gradient: linear-gradient(45deg, #FF0000, #FF6600, #FFCC00, #FFFF00, #FF0000, #FF9900);
   --gradient2: linear-gradient(45deg, #FF0000, #FF6600, #FFCC00, #990000, #FF0000, #FF9900);
   --gradient3: linear-gradient(#FFCC33, #FFFFCC);
   --glass-bg: rgba(255, 255, 255, 0.05);
   --border: 1px solid rgba(255, 255, 255, 0.1);
   --shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
   --dropdown-bg: rgba(20, 20, 35, 0.8);
}

/***************************************************/
/* NAVIGATION */
/***************************************************/
.topbar {
   width:100%; min-height:30px; background:black; color:white; font-weight:bolder; text-align:center; padding:.5rem; line-height:1;  }
.navbar {
   position:fixed; top:30px; left:0; width:100%; padding:1rem 5%; border-bottom:var(--border); z-index:1000; transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow:var(--shadow); background:url(img/wood-pattern.jpg);      }
.navbar.scrolled {
   padding:0.8rem 5%; background:black; background-image: url("img/patterns/diamonds-are-forever.png"); top:0; z-index:1000;  }
.navbar-container {
   display:flex; justify-content:space-between; align-items:center; max-width:1400px; margin:0 auto;    }
.logo {
   font-size:1.8rem; font-weight:700; background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
   animation:gradient 5s linear infinite; background-size:300%; letter-spacing:-0.5px; line-height:.7; }
.logo .sublogo {
  font-size:.9rem; background:#FFFF99; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:.9px; }
.nav-links {
   display:flex; gap:2.5rem; list-style:none;    }
.nav-links a {
   color:white; text-decoration:none; font-weight:500; position:relative; padding:0.5rem 0; transition:all 0.3s ease; font-size:1.05rem; letter-spacing:0.3px; }
.nav-links a::before {
   content: ''; position:absolute; top:-4px; left:0; width:0; height:2px; background:var(--gradient); background-size:300%; transition:width 0.3s ease;  }
.nav-links a::after {
   content:''; position:absolute; bottom:-4px; right:0; width:0; height:2px; background:var(--gradient); background-size:300%; transition:width 0.3s ease;  }
.nav-links a:hover {
   color:#fff; text-shadow: 0 0 8px rgba(255, 255, 255, 0.3); }
.nav-links a:hover::before,
.nav-links a:hover::after {
   width: 100%; animation: gradient 8s linear infinite; }
.mobile-nav-toggle {
   display:none; background:none; border:none; cursor:pointer; width:40px; height:40px; position:relative; z-index:1001; border-radius:50%;
   transition:background-color 0.3s ease; }
.mobile-nav-toggle:hover {
   background-color: rgba(255, 255, 255, 0.1);  }
.mobile-nav-toggle .bar {
   position:absolute; left:50%; transform:translateX(-50%); width:20px; height:2px; background:white; transition:all 0.4s ease; }
.mobile-nav-toggle .bar:nth-child(1) { top: 14px; }
.mobile-nav-toggle .bar:nth-child(2) { top: 19px; }
.mobile-nav-toggle .bar:nth-child(3) { top: 24px; }

@keyframes gradient {
   0% { background-position: 0% 50%; }
   50% { background-position: 100% 50%; }
   100% { background-position: 0% 50%; }
}

@media (max-width: 768px) {
   .topbar { padding:.5rem 3rem;   }
   .navbar { top:50px;       }
   .nav-links {
       position:fixed; top:0; right:-100%; height:80vh; width:80%; max-width:400px; flex-direction:column; justify-content:center; align-items:center; gap:2rem;
       background:url(img/wood-pattern.jpg); transition:all .5s cubic-bezier(0.4, 0, 0.2, 1); padding:2rem;   }
   .nav-links::before {
       content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.03));
       pointer-events: none;     }
   .nav-links.active {
       right: 0;     }
   .nav-links a {
       font-size:1.2rem; opacity:0; transform:translateX(20px); transition:all 0.4s ease;     }
   .nav-links.active a {
       opacity:1; transform:translateX(0);    }
   .nav-links a:nth-child(1) { transition-delay: 0.1s; }
   .nav-links a:nth-child(2) { transition-delay: 0.2s; }
   .nav-links a:nth-child(3) { transition-delay: 0.3s; }
   .nav-links a:nth-child(4) { transition-delay: 0.4s; }
   .nav-links a:nth-child(5) { transition-delay: 0.5s; }
   .mobile-nav-toggle {
       display: block;    }
   .mobile-nav-toggle.active .bar:nth-child(1) {
       transform:translate(-50%, 5px) rotate(45deg); width:24px;     }
   .mobile-nav-toggle.active .bar:nth-child(2) {
       opacity: 0;     }
   .mobile-nav-toggle.active .bar:nth-child(3) {
       transform: translate(-50%, -5px) rotate(-45deg);  width: 24px;     }
   .overlay-nav {
       position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.5); opacity:0; visibility:hidden; transition:all 0.4s ease;
       backdrop-filter:blur(4px);  }
   .overlay-nav.active {
       opacity:1; visibility:visible; }
}

/***************************************************/
/* GENERIC */
/***************************************************/
.bordertest1 {    border:3px solid red;}
.bordertest2 {    border:3px solid green;}
.bordertest3 {    border:3px solid blue;}
.bordertest4 {    border:3px solid yellow;}
.centerit { text-align:center; }
.ulit { border-bottom:1px solid black; }
.italit { font-style: italic;}
.boldit { font-weight:bold; }
a { color:inherit; text-decoration:none; }
p { margin-bottom:1rem; }
.hidden {  display: none; }

/***************************************************/
/* FULL SITE */
/***************************************************/
body { background-color:#ffffff; background-image: url(img/patterns/brick-wall.png); min-height:100vh;    }
section {
   padding:0; display:flex; justify-content:center; align-items:center; position:relative; overflow:hidden; }
.section-content {
   display:flex; flex-direction:column; justify-content:center; align-items:center; max-width:1400px; width:100%; text-align:center; position:relative; z-index:1; padding:2rem;}
.section-description {
   font-size:1.2rem; margin:0 auto; line-height:1.6; color:black; }
h1 {
  display: inline-block; /* ensures the h1 only takes the width of its content */
  position: relative; padding-bottom:.8rem; /* adds a small gap between the text and the line */   }
h1::after {
  content:""; position:absolute; width:50%; height:4px; bottom:0; left:25%; background-color:#990000; border-radius:4px;  }
h1.section-title {
   margin-bottom:2rem; }
.wrap-cta {
   margin-top:1rem; }
.redbtn {
   background:#990000; color:white; border-radius:15px; padding:.5rem 1rem; cursor:pointer; border:1px solid transparent; }
.redbtn:hover {
   background:var(--gradient3); color:black; border:1px solid #990000; }
.wrap-col {
   display:flex; flex-direction:row; justify-content:center; align-items:center; gap:2rem; }
.col25 { max-width:25%; }
.col33 { max-width:33%; }
.col40 { max-width:40%; }
.col50 { max-width:50%; }
.col60 { max-width:60%; }
.col75 { max-width:75%; }
.parallax1 {
  background: url(img/pexels-fireplace1.jpg) no-repeat fixed center center; background-size:cover; min-height:350px; position:relative; box-shadow: 1px 8px 12px -3px #000000!important; border-top:1px solid black; border-bottom:1px inset black;}
.divider {  height: 5px; background: linear-gradient(to right, #ffcc00, #ffffff, #ffcc00); }
.divider2 {  height: 5px; background: linear-gradient(to right, #990000, #ffffff, #990000); }
.divider3 {  height: 10px; background-image: url("img/patterns/diagonales-decalees.png"); background: linear-gradient(to right, #E3E3E3, #ffffff, #E3E3E3); }
.divider4 {  height: 10px; background: linear-gradient(to right, #E3E3E3, #000, #E3E3E3); }
.custom-shape-divider-top1 {
    position:absolute; top:0; left:0; width:100%; overflow:hidden; line-height:0; }
.custom-shape-divider-top1 svg {
    position:relative; display:block; width:calc(100% + 1.3px); height:46px; }
.custom-shape-divider-top1 .shape-fill {
    fill:white; }

@media (max-width:1150px){
   .parallax1 {
       background:url(img/pexels-fireplace1.jpg) center top; background-size:cover;}
}
@media (max-width: 768px) {
   section { min-height:50vh; }
   .section-content { min-height:50vh; padding:2rem 1rem;  }
   .wrap-col { flex-direction:column; justify-content:flex-start; align-items:center; gap:2rem; }
   .col25, .col33, .col40, .col50, .col60, .col75 {  max-width:100%; }
}

/***************************************************************************/
/* HOME SECTION */
/***************************************************************************/
section.home {
   background: url(img/landing-back.jpg) no-repeat center; background-size:cover; }
.home .section-content {
   background:rgba(0,0,0,.3); min-height:100vh; max-width:100%; padding:0;   }
.home .section-title {
   width:100%; align-items:center; font-size:3rem; font-weight:800; line-height:1.1; letter-spacing:-2px; color:white; -webkit-text-stroke: 2px #000; margin-top:-150px; }
.home .wrap-cta {
   position:absolute; bottom:90px;  }

@media (max-width: 768px) {
   .home .section-content { min-height:60vh; max-width:100%; padding:0;   }
   .home .section-title { font-size:2rem; margin-top:-100px; padding:0 3rem;     }
}
/***************************************************************************/
/* ABOUT SECTION */
/***************************************************************************/
section.about {
   background-color: #E0DDD7; background-image: url("img/patterns/diamonds-are-forever.png"); color:black; padding-bottom:2.5rem; }
.about .section-content {
   text-align:left;}
.about .section-content .wrap-col {
   align-items:flex-start; }
.about .section-content video {
   border:3px solid black; max-width:100%;  }
.about .section-title {
   font-size:3rem; font-weight:800; background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
   animation:gradient 8s linear infinite; background-size:300%; line-height:1.1; letter-spacing:-2px; -webkit-text-stroke: .5px #990000;  }
@media (max-width: 768px) {
   .about .section-content {  text-align:center; }
   .about .section-title {  font-size:2.3rem; padding-top:2rem;  }
}
/* Large screen optimizations */
@media (min-width: 1440px) {
   .about .section-content {
      min-height:100vh;   }
}

/***************************************************************************/
/* SERVICES SECTION */
/***************************************************************************/
section.services {
   background-color:#ffffff; background-image: url(img/patterns/svc-back2.png); }
.services .section-title {
   font-size:3rem; font-weight:800; background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
   animation:gradient 8s linear infinite; background-size:300%; line-height:1.1; letter-spacing:-2px; -webkit-text-stroke: .5px #990000;  }
.services .section-content .wrap-services {
   display:flex; flex-direction:row; justify-content:space-around; gap:3rem; padding:2rem 0; }
.services .section-content .wrap-electric,
.services .section-content .wrap-gas {
   display:flex; flex-direction:column; justify-content:flex-start; align-items:center; min-height:25vh; flex:1; border:3px solid black; background:#6B0000; color:white; max-width:500px; }
.services .wrap-electric img,
.services .wrap-gas img {
   max-width:100%; }
.services .wrap-electric .title,
.services .wrap-gas .title {
   font-size:1.6rem; font-weight:bold; letter-spacing:1px; padding:1rem 1rem 2.5rem; color:white; }
.services .wrap-electric p,
.services .wrap-gas p {
   padding:0 1rem 1.5rem; }
.servicebtn {
   background:#FFFFCC; color:black; border-radius:15px; padding:.5rem 1rem; cursor:pointer; border:1px solid transparent; }
.servicebtn:hover {
   background:var(--gradient3); color:black; border:1px solid #990000; }

@media (max-width: 1150px) {
   .services .section-content .wrap-services { }
   .services .section-content .wrap-electric,
   .services .section-content .wrap-gas {      }
}

@media (max-width: 768px) {
   .services .section-content {  text-align:center; }
   .services .section-title {  font-size:2.3rem; padding-top:2rem;  }
   .services .section-content .wrap-services {  flex-direction:column; justify-content:center; width:100%;}
}
/***************************************************************************/
/* FAQ SECTION */
/***************************************************************************/

section.faq {
   background-color:#ffffff; background-image: url(img/patterns/svc-back2.png); color:black; padding:0 0 6rem; }
.faq .section-content {
   text-align:left; }
.faq .section-content .section-title {
   font-size:3rem; font-weight:600; color:black; line-height:1.6; letter-spacing:2px; }
.accordion {
   border-radius:12px; overflow: hidden; box-shadow:0 10px 30px rgba(0, 0, 0, 0.3); border:1px solid black; max-width:1000px;       }
.accordion-item {
   border-bottom: 1px solid white;       }
.accordion-item:last-child {
   border-bottom: none;      }
.accordion-input {
   display: none;        }
.accordion-label {
   display:flex; align-items:center; justify-content:space-between; padding:1.5rem 2rem; cursor:pointer; background:#6B0000; color:#eee; font-size:1.1rem;
   font-weight: 500; transition: all 0.3s ease; position: relative;    }
.accordion-label:hover {
   background:#990000; padding-left:2.5rem;    }
.accordion-label::before {
   content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:#FFFFCC; transition:all 0.3s ease;  }
.accordion-label:hover::before {
   background:#FFFFCC; width:15px;   }
.accordion-icon {
   display:flex; align-items:center; justify-content:center; width:30px; height:30px; background:#FFFFCC; border-radius:50%; transition: all 0.4s ease;
   flex-shrink:0; margin-left:15px;        }
.accordion-icon::before,
.accordion-icon::after {
   content: ''; position: absolute; background:black; transition: all 0.3s ease;           }
.accordion-icon::before {
   width: 12px; height: 2px;          }
.accordion-icon::after {
   width:2px; height: 12px;          }
.accordion-input:checked + .accordion-label .accordion-icon {
   transform: rotate(180deg);  background: #FFFFCC;   }
.accordion-input:checked + .accordion-label .accordion-icon::before {
   background: #303030;      }
.accordion-input:checked + .accordion-label .accordion-icon::after {
   opacity: 0;          }
.accordion-input:checked + .accordion-label {
   background: #6B0000;  color:#FFFFCC ;     }
.accordion-input:checked + .accordion-label::before {
   background: #FFFFCC; width: 15px;    }
.accordion-content {
   max-height:0; overflow:hidden; transition:max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1); background:white;       }
.accordion-input:checked ~ .accordion-content {
   max-height:800px;     }
.accordion-content-inner {
   padding: 1.5rem 2rem; color:#303030; line-height: 1.6; font-size: 1rem;   }
.accordion-content-inner p:last-child {
   margin-bottom: 0;      }
.accordion-content-inner strong {
   color:black; font-weight:800;  }

/* Animation for items */
@keyframes slideIn {
   from { opacity: 0; transform: translateX(-30px);   }
   to {   opacity: 1; transform: translateX(0);   }
}
.accordion-item {
   animation: slideIn 0.5s ease forwards; opacity: 0; }
.accordion-item:nth-child(1) { animation-delay: 0.1s; }
.accordion-item:nth-child(2) { animation-delay: 0.2s; }
.accordion-item:nth-child(3) { animation-delay: 0.3s; }
.accordion-item:nth-child(4) { animation-delay: 0.4s; }
.accordion-item:nth-child(5) { animation-delay: 0.5s; }

@media (max-width: 768px) {
   .faq .section-content {  text-align:center; }
   .faq .section-content .section-title { font-size:2rem; }

}

/* Responsive */
@media (max-width: 600px) {
   .accordion-label {
       padding:20px 20px; font-size:1rem;    }
   .accordion-label:hover {
       padding-left:25px;     }
   .accordion-content-inner {
       padding:20px 20px; font-size:0.9rem;      }
   .accordion-icon {
       width:26px; height:26px;    }
}
/***************************************************************************/
/* WHY CHOOSE SECTION */
/***************************************************************************/

section.whychoose {
   background-color:#000000; background-image:url(img/patterns/brick-wall.png); color:white; }
.whychoose .section-content {
   text-align:left; }
.whychoose .section-description {
   color:white; padding:2rem 0;}
.whychoose .section-title {
   font-size:3rem; font-weight:800; background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
   animation:gradient 8s linear infinite; background-size:300%; line-height:1.1; letter-spacing:-2px; -webkit-text-stroke:.5px #990000; margin-top:2rem;  }

@media (max-width: 768px) {
   .whychoose .section-content {  text-align:center; padding:2rem 1rem; }
   .whychoose .section-title {    font-size:2.3rem;   }
}

/***************************************************************************/
/* GALLERY SECTION */
/***************************************************************************/
section.gallery {
   background:#f3f3f3; background:#E6E6E6; background-image:url("img/patterns/diagonales-decalees.png"); color:black; display:block; padding:5rem 0 6rem; min-height:100vh; text-align:center;  }
.gallery .section-title {
   font-size:3rem; font-weight:800; background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
   animation:gradient 8s linear infinite; background-size:300%; line-height:1.1; letter-spacing:-2px; -webkit-text-stroke:.5px #990000; padding-top:3rem;   }
.gallery .slider {
   display:flex; height:450px; max-height:auto; overflow-y:hidden; overflow-x:scroll !important; padding:2rem 1rem;
   scroll-behavior: smooth; }
.gallery .slider::-webkit-scrollbar {
   height:5px; width:150px; display:none;  }
.gallery .slider::-webkit-scrollbar-track {
   background: transparent;  }
.gallery .slider::-webkit-scrollbar-thumb {
   background: #888;  }
.gallery .slider::-webkit-scrollbar-thumb:hover {
   background: #555;   }
.gallery .slider img {
   border:1px solid black;  }
.gallery .slider img:hover {
   transform: scale(1.05); box-shadow: 10px 10px 10px rgba(0,0,0,0.15); }
.gallery .slide {
   position:relative; }
.gallery .slide img {
   height:100%; width:333px; margin:0 10px; object-fit:cover; border-radius:15px; cursor:pointer; transition:.25s ease-in-out;  }
.gallery .control-prev-btn {
   position:absolute; top:50%; left:0; background-color:rgba(255,255,255,0.55); height:100px; line-height:100px; width:45px; text-align:center;
   box-shadow:0 1px 3px #888; user-select:none; color:#444; cursor:pointer; }
.gallery .control-next-btn {
   position:absolute; top:50%; right:0; background-color:rgba(255,255,255,0.55); height:100px; line-height:100px; width:45px; text-align:center;
   box-shadow:0 1px 3px #888; user-select:none; color:#444; cursor:pointer;  }
.gallery .slide img.zoomed {
   width:auto; height:90%; position:fixed; top:50%; left:50%; z-index:1003; transform: translate(-50%, -50%); }
.overlay-gal {
   position:absolute; height:100vh; width:100%; background:rgba(0,0,0,.85); top:0; z-index:1002; display:none;  }
.overlay-gal.active {
   display:block;  }
.gallery .close-btn {
   position:fixed; top:5%; right:calc(25% - 30px); width:40px; height:40px; background-color:rgba(255,255,255,0.9); border-radius:50%; display:none;
   align-items:center; justify-content:center; cursor:pointer; z-index:1003; box-shadow:0 2px 10px rgba(0,0,0,0.3); transition:background-color 0.2s;  }
.gallery .close-btn:hover {
   background-color: rgba(255,255,255,1);  }
.gallery .close-btn.active {
   display: flex; }
.gallery .close-btn i {
   color:#444; font-size: 20px; }
@media (max-width: 768px) {
   .gallery .section-title {  font-size:2.3rem;   }
}
@media only screen and (max-width: 420px) {
   .gallery .slider { padding: 0;    }
   .gallery .slide {  padding: 16px 10px;    }
   .gallery .slide img { margin: 0;    }
   .gallery .control-prev-btn { top: 37%;     }
   .gallery .control-next-btn { top: 37%;    }
}


/***************************************************************************/
/* CONTACT SECTION */
/***************************************************************************/
.contact-divider {
   min-height:10px; background-image: linear-gradient(to bottom, #D6D6D6, #F5F5F5)}
section.contact {
   flex-direction:row; text-align:left; padding:4rem 0 1rem; background-image: linear-gradient(to bottom, #F5F5F5, #FFFFFF); }
section.contact .wrap-contact-text {
   min-height:200px; width:100%; padding:2rem; font-weight:bolder; text-align:center; line-height:2; }
section.contact .wrap-contact-form {
   min-height:200px; width:100%; padding:2rem;  }
.contact .section-title {
   font-size:3rem; font-weight:800; background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
   animation:gradient 8s linear infinite; background-size:300%; line-height:1.1; letter-spacing:-2px; -webkit-text-stroke: .5px #990000;  }
.contact h1.section-title {
   margin-bottom:.5rem; }
.contact .form-container {
   max-width:600px; width:100%; padding:2rem; position: relative; border-radius:12px; box-shadow:0 15px 35px rgba(0, 0, 0, 0.5); background:white;
   border:1px solid #333;        }
.contact .form-header {
   text-align:center;     }
.contact .contact-form {
   display:flex; flex-direction:column; gap:1rem;        }
.contact .input-group {
   display:flex; flex-direction:column;   }
.contact label {
   display:block; font-weight:500; color:#CC0000; margin-bottom:.2rem; font-size:0.95rem;     }
.contact input[type="text"],
.contact input[type="tel"],
.contact input[type="email"],
.contact textarea {
   width:100%; padding:.5rem; border:2px solid #333; border-radius:8px; font-size:1rem; font-family:inherit; background-color:#EEEEEE; color:black;
   transition: all 0.3s ease; outline:none; }
.contact input[type="text"]:focus,
.contact input[type="tel"]:focus,
.contact input[type="email"]:focus,
.contact textarea:focus {
   border-color:#555; background-color:#EEEEEE; box-shadow:0 0 0 3px rgba(85, 85, 85, 0.3); transform:translateY(-1px);  }
.contact textarea {
   resize:vertical; min-height:5rem; line-height:1.5; }
.contact input::placeholder,
.contact textarea::placeholder {
   color:#707070; font-style:italic; }
.contact .submit-btn {
   align-self:flex-end; width:auto; font-size:1.1rem; background:black; color:white; border-radius:15px; padding:.5rem 1rem; cursor:pointer; border:1px solid transparent; }
.contact .submit-btn:hover {
   background:var(--gradient3); color:black; border:1px solid #990000; }
.contact .contact-social {
   width:100%; display:flex; flex-direction:row; justify-content:center; gap:3rem; }
.contact .contact-social i {
   font-size:2rem; color:#990000; }
.contact .contact-social i:hover {
   color:#444444; }

.input-error {
   border-color: #e53e3e !important; background-color:#fed7d7 !important; }
.input-error:focus {
   border-color:#e53e3e !important; box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1) !important;  }
.sendmsg {
   width:100%; padding:.5rem 0 1rem; color:blue; text-align:center; }

.poohbear-field {
    display: none; /* A simple method that works for many bots */
    visibility:hidden; height:0; width:0; position:absolute; left:-9999px; }

@media (max-width: 768px) {
   section.contact { flex-direction:column; text-align:center;  }
   .contact .section-title { font-size:2.3rem; }
}
@media (max-width: 480px) {
}

/* Accessibility enhancements */
@media (prefers-reduced-motion: reduce) {
   * {
       transition: none !important;
       animation: none !important;
   }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
   .contact input[type="text"],
   .contact input[type="email"],
   .contact textarea { border-width: 3px;    }
}

/***************************************************************************/
/* ELECTRIC AND GAS INSERT PAGE */
/***************************************************************************/
section.fireplace-inserts {
   background-color: #E0DDD7; background-image: url("img/patterns/diamonds-are-forever.png"); color:black; padding-bottom:2.5rem; margin-top:70px; }
.fireplace-inserts .section-content {
   display:flex; flex-direction:column; justify-content:flex-start; align-items:center; text-align:left;}
.fireplace-inserts .section-content .wrap-col {
   align-items:flex-start; padding-top:1rem; }
.fireplace-inserts h3 {
   text-align:left; padding-bottom:.5rem; }
.fireplace-inserts .section-content .wrap-col img,
.fireplace-inserts .section-content .wrap-col-dist img {
   max-width:100%; }
.fireplace-inserts .gas-image,
.fireplace-inserts .electric-description {
   order:1; }
.fireplace-inserts .electric-image,
.fireplace-inserts .gas-description {
   order:2; }
.fireplace-inserts .section-content ul {
   margin-left:2rem; }
.fireplace-inserts .section-content video {
   border:3px solid black; max-width:100%;  }
.fireplace-inserts .section-title {
   font-size:3rem; font-weight:800; background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
   animation:gradient 8s linear infinite; background-size:300%; line-height:1.1; letter-spacing:-2px; -webkit-text-stroke: .5px #990000;  }
.fireplace-inserts .wrap-col-dist {
  width:100%; display:grid; gap:1em; grid-template-columns:repeat(auto-fit, minmax(10em, 25em)); }
.distributor-btn {
   background:black; color:white; padding:.5rem 1rem; cursor:pointer;  }
.distributor-btn:hover {
   background:var(--gradient3); color:black;  }
.brochure-btn {
   background:black; color:white; padding:.5rem 1rem; margin:1rem 0; }
.brochure-btn:hover {
   background:var(--gradient3); color:black;  }
.send-to-service2 {
   min-width:100%; background:url(img/wood-pattern.jpg); padding:1rem; display:flex; justify-content:center; }
.send-to-service2 .service2-btn {
   padding:.5rem 1rem; background:#FFFFCC; color:#990000; font-size:1.5rem; cursor:pointer; border-radius:8px; text-align:center; }
.send-to-service2 .service2-btn:hover {
   background:var(--gradient3); color:black;   }


@media (max-width: 768px) {
   .fireplace-inserts .section-content { text-align:center;  }
   .fireplace-inserts .section-title { font-size:2.3rem;    }
   .fireplace-inserts h3 { text-align:center; padding:1.5rem .5rem; }
   .fireplace-inserts .electric-image,
   .fireplace-inserts .gas-image {
      order:1; }
   .fireplace-inserts .electric-description,
   .fireplace-inserts .gas-description {
      order:2; }
}


/*******************************************************/
/* FOOTER */
/*******************************************************/
.flame-divider {
   background: url(img/shutterstock_2464391231.jpg) repeat bottom center; background-size:contain; min-height:100px;  }
.footer {
   background:black; color:white; min-height:300px; padding:3rem 0 0; margin-top:0;  width:100%; }
.wrap-footer {
    width:100%; display:flex; justify-content:space-between; flex-wrap:wrap;   }
.footer .coltitle {
   color:#FF9966; border-bottom:2px solid #FF9966; font-size:1.15rem;}

.wrap-footer .logo {
   font-size:3rem; line-height:1; }
.wrap-footer .sublogo {
   font-size:1.5rem; color:#ffcc00;}
.col1, .col2, .col3, .col4 {
    width:100%; flex:1; display:flex; justify-content:center; align-items:flex-start; text-align:center; min-width:275px; padding:1rem;  }
.footer i { margin:0 1.5rem; font-size:1.5rem; }
.footer i:hover, .footer a:hover {
    color:#ffcc00; }
a.footerbtn {
   background:#990000; color:white; border-radius:15px; padding:.2rem .6rem; cursor:pointer; border:1px solid transparent; }
a.footerbtn:hover {
   background:var(--gradient3); color:black; border:1px solid #990000; }

.copyright, .copyright a {
   width:100%; background:#303030; text-align:center; font-size:.8rem; padding:.3rem; margin-top:1rem; color:white; line-height:1.5; }
@media (max-width:900px) {
    .footer { padding:4rem 0 0;   }
    .wrap-footer { flex-direction:column; justify-content:space-between; align-items:center;   }
}

