/*
    Theme Name: J&S Garage Doors
    Theme URI: https://www.jsgaragedoors.ca/
    Author: the Digital Guider team
    Author URI: https://digitalguider.com/
    Description: J & S Garage Doors is a garage door specialist for residential, commercial, agricultural and industrial applications, proudly serving GTA: Oshawa to Oakville, from Toronto to Innisfil. We would love for you to contact us, our team can give you personalized advice in purchasing a garage door, an installation that meets the highest industry standards, and unequalled after-sales service thanks to our maintenance and repair program. Our full range of products also includes electric garage door openers as well as many other accessories to go with your garage door. Think of us when it comes to buying, installing or repairing any type of residential or commercial garage door.
    Requires at least: 6.0
    Tested up to: 6.6.2
    Requires PHP: 8.0
    License: GNU General Public License v2 or later
    Text Domain: jsgaragedoors
*/

form#forminator-module-15 input {
    height: 60px;
    padding: 0 30px 0 28px;
    padding-right: 45px;
    border: 1px solid #e0e0e0;
    color: var(--body-color);
    background-color: #ffffff;
    border-radius: 0;
    font-size: 14px !important;
    width: 100%;
    transition: all 0.3s 
ease-in-out;
}

form#forminator-module-15 label {
    display: none;
}

form#forminator-module-15 textarea {
    min-height: 140px;
    border-radius: 0;
    height: 60px;
    padding: 16px 30px 0 28px;
    padding-right: 45px;
    border: 1px solid #e0e0e0;
    color: var(--body-color);
    background-color: #ffffff;
    border-radius: 0;
    font-size: 14px !important;
    width: 100%;
    transition: all 0.3s 
ease-in-out;
}

form#forminator-module-15 button {
    padding: 18px 40px !important;
    font-size: 16px !important;
}
.forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid=open] .forminator-row-inside:not(:last-child), .forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid=open] .forminator-row:not(:last-child) {
        margin-bottom: 20px !important;
    }

.vs-blog--style2 .vs-blog__img--main {
    height: 270px;
    object-fit: cover;
}
img.vs-blog__img--main.default-blog {
    border: 10px solid #8b8b8b;
}
.custom-style {
    width: 100%;
    max-width: 100% !important;
}

.custom-style .blog-img img {
    height: 250px !important;
    border-radius: 10px;
}
.custom-style .blog-img {
    height: 250px !important;
}
.blog-single .blog-audio img, .blog-single .blog-audio > *, .blog-single .blog-img img, .blog-single .blog-img > * {
    height: 370px;
    width: 100%;
    object-fit: cover;
}
.elementor-heading-title span {
    color: #04738f;
}   
.error-items img {
    width: 60%;
}
#tab-gallery .gallery-item:hover img, #notab-gallery .gallery-item:hover img, #nofilter-gallery .gallery-item:hover img {
    transform: none;
}
#tab-gallery .gallery-icon img {
    height: 270px;
    background-color: #f2f2f2 !important;
    mix-blend-mode: darken !important; /* or darken */
    object-fit: contain;
    filter: contrast(108%) brightness(84%);
}
#notab-gallery .gallery-icon img {
    height:250px;
    background-color: #f2f2f2 !important;
    mix-blend-mode: darken !important; /* or darken */
    object-fit: contain;
    filter: contrast(108%) brightness(84%);
}
#notab-gallery figcaption {
    margin-top: 10px;
    font-weight: 500;
    display: none;
    font-size: 14px;
}

#notab-gallery figure.gallery-item:hover figcaption, #nofilter-gallery figure.gallery-item:hover figcaption {
    display: block !important;
    padding: 20px;
    background: #f2f2f2;
    border-radius: 10px;
}
#nofilter-gallery .gallery-icon img {
    height:300px;
    object-fit: cover;
}
#nofilter-gallery figcaption {
    margin-top: 10px;
    font-weight: 500;
    display: none;
    font-size: 14px;
}
/*Blog Pagination CSS*/
.page-nav-wrap {
  margin-top: 50px;
}

.page-nav-wrap ul li {
  display: inline-block;
}

.page-nav-wrap ul li .page-numbers {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  background: #f6f6f6;
  font-weight: 700;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  margin: 0 2px;
}

.page-nav-wrap ul li .page-numbers.current {
  background-color: var(--theme-color);
  color: #fff;
}

.social-style-top i {
    color: #fff;
    margin-right: 20px;
}

.social-style-top {
    text-align: right;
}
.video-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    height: 100vh;
}
.video-wrapper video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.video-wrapper:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #000;
    opacity: 0.4;
}
.custom_container {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 940px;
    width:100%;
}
.custom_container h1 {
    color: #fff;
    line-height: 1.2;
/*     -webkit-text-stroke: 3px #8f2004;
    text-stroke: 3px #fff; */
    font-size: 62px;
    font-weight: 800;
    padding-top: 55px;
}
.navbar-wrap {
    padding: 10px 0;
    background: #fff;
}
.main-menu > ul > li > a {
    padding: 27px 20px;
    color: #000!important;
    display: inline-flex;
    align-items: center;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    letter-spacing: 3.2px;
    font-weight: 600;
    text-transform: uppercase;
}
.main-menu ul.mega-menu li a {
    font-size: 15px!important;
    display: inline-block;
    font-weight: 500;
    color: #8f2004;
    padding-left: 22px;
    text-transform: uppercase;
    line-height: 21px!important;
}
.main-menu ul.mega-menu li li a{
	font-weight: 500!important;
    color: #000!important;
    font-size: 15px!important;
    text-transform: capitalize;
}
.main-menu ul.sub-menu li a{
	font-weight:400;
}
.main-menu ul.sub-menu {
    padding: 18px 13px!important;
    left: 0px;
}
.header_list ul {
    list-style: square;
    display: flex;
    justify-content: space-around;
}
.header_list {
    /* padding-bottom: 10px; */
    border-top: 2px dotted #fff;
    border-bottom: 2px dotted #fff;
    padding: 10px 0 0;
    margin: 30px 0 30px;
}
.vs-banner__buttons {
    display: flex;
    align-items: center;
    gap: 50px;
}
.main-menu > ul > li > a {
    padding: 27px 20px;
    color: #000;
    display: inline-flex;
    align-items: center;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    letter-spacing: 3.2px;
    font-weight: 600!important;
    text-transform: uppercase;
}
.ml_l{
	margin-left:-12px
}
.l_p{
	position:relative;
	left: 7px;
    top: -3px;
}
.l_e{
	position:relative;
	left: 13px;
    top: -4px;
}

.header_list ul li {
    color:#fff;
    font-size: 19px!important;
    text-transform: ;
    list-style-position: outside;
}
.space {
    padding: 80px 0;
    background: #fff;
}
.section_title .line-left, .section_title .line-right {
    width: 30px;
    height: 1px;
    background: #8f2004;
    position: relative;
    top: 2px;
}
.sec-title {
    text-transform: uppercase;
    line-height: 1.36;
    margin: -0.2em 0 0px 0;
    padding-left: 0px;
}
.vs-about__title {
    font-weight: 400;
    font-size: 30px;
    max-width: 75%;
    margin: 0 0 25px 0;
}
.vs-about__desc {
    margin: 0 0 40px 0;
    max-width: 100%;
}
.vs-about__img1 img {
    border-radius: 20px;
}
.vs-about__title {
    font-weight: 400;
    font-size: 30px;
    max-width: 75%;
    margin: 0 0 25px 0;
}
.short-contact-about-seven {
    display: flex;
    align-items: center;
    gap: 80px;
    margin-top: -15px;
    background: #f5f5f5;
    padding: 10px;
    border-radius: 10px;
    border-left: 2px solid #8f2004 !important;
}
.short-contact-about-seven .left-area {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
}
.short-contact-about-seven .left-area .title {
    margin-bottom: 0;
    color: var(--color-secondary);
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 58px;
}
.short-contact-about-seven .left-area p.disc {
    margin-bottom: 0;
    color: #04738f;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -0.32px;
}
.short-contact-about-seven .left-area::after {
    position: absolute;
    content: "";
    right: -40px;
    top: 0;
    height: 60px;
    width: 1px;
    background: #e3e3e3;
}
.vs-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    text-transform: uppercase;
    text-align: center;
    background-color: var(--theme-color);
    color: #fff;
    font-family: var(--body-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    padding: 22px 30px;
    border-radius: 0px;
    z-index: 1;
    overflow: hidden;
    letter-spacing: 0.3px;
    gap: 5px;
    transition: all 0.3s ease-in-out;
    border-radius: 50px;
}
.h2, h2 {
    font-size: 36px!important;
}

.section_title h5 {
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 20px;
    display: inline-flex;
    position: relative;
    align-items: center;
    gap: 10px;
    color: #8f2004 !important;
}

.vs-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    text-transform: uppercase;
    text-align: center;
    background-color: var(--theme-color);
    color: #fff;
    font-family: var(--body-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    padding: 22px 30px;
    border-radius: 0px;
    z-index: 1;
    overflow: hidden;
    letter-spacing: 0.3px;
    gap: 5px;
    transition: all 0.3s ease-in-out;
	border-radius:50px!important;
}


/* start ticker */
@-webkit-keyframes slide{0%{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);}100%{-webkit-transform:translate(100%,0);-ms-transform:translate(100%,0);transform:translate(100%,0);}}/*!sc*/
@keyframes slide{0%{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);}100%{-webkit-transform:translate(100%,0);-ms-transform:translate(100%,0);transform:translate(100%,0);}}/*!sc*/

.marquee-cont{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-flow: row nowrap;
  -webkit-box-pack: center;
  justify-content: center;
  background-color: #8f2004;
  color:  #fff;
 
}

.marquee-slider{
  min-width: 100%;
  flex-shrink: 0;
  animation-name: slide;
  animation-direction: reverse;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-duration: 45s;
}

.marquee-slider p {
    display: inline-block;
    position: relative;
    font-size: 40px;
    margin: 0;
    padding: 15px;
    color: #fff!important;
    text-transform: uppercase;
}

.marquee-slider p::before{
  content: ".";
    position: absolute;
    left: -7px;
    font-weight: 900;
    top: 35%;
    transform: translateY(-50%);
}

.bold{
  font-weight: 800;
}
.med{
  font-weight: 600;
}
.lit{
  font-weight: 300;
}
/*end ticker */

.service-layout22 {
    background-image: url(https://jsgaragedoors.digitalguider.dev/wp-content/uploads/2026/03/service-bg.jpg) !important;
    background-position: 0 70%;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    position: relative;
    padding: 80px 0;
}
.service-layout22:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #000;
    opacity: 0;
    animation: slide 100s linear infinite;
    -webkit-animation: slide 100s linear infinite;
}
.section_title_one h5 {
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 20px;
    display: inline-flex;
    position: relative;
    align-items: center;
    gap: 10px;
    color: #fff !important;
}

.section_title_one .line-left, .section_title_one .line-right {
    width: 30px;
    height: 1px;
    background: #fff;
    position: relative;
    top: 2px;
}
.service-tab2 .nav-tabs .nav-link.active {
    color: #fff!important;
    background-color: var(--theme-color);
}
.service-tab2 .nav-tabs .nav-link {
    background-color: #ebf1f214;
    padding: 15px 10px;
    border: 0;
    font-size: 15px;
    font-family: var(--title-font);
    color: var(--title-color);
    position: relative;
    border-radius: 50px;
}
.service-tab2 .nav-tabs .nav-link{
	padding: 20px 12px!important;
}
.pd_150 {
    padding: 0 120px!important;
}
.service-tab2 .nav-tabs .nav-link {
    background-color: #ebf1f214!important;
    padding: 15px 10px;
    border: 0;
    font-size: 15px;
    font-family: var(--title-font);
    color: #fff!important;
    position: relative;
    border-radius: 50px;
}
.service-tab2 .nav-tabs .nav-link{
	font-size:15px!important;
}

.service-tab2 .tab-content {
    background-color: var(--white-color);
    border-radius: 20px;
}

.service-tab2 .service-content ul li {
    font-size: 19px;
    text-transform: capitalize;
    margin-bottom: 15px;
    color: #000;
    display: block;
    width: auto;
    position: relative;
    padding-left: 30px;
    border-bottom: 1px dotted;
    padding-bottom: 7px;
}

.cta_section {
    display: flex;
    justify-content: center;
}
.cta_section a {
    margin-right: 10px;
}
.space_gallery {
    position: relative;
}
.space_gallery {
    background-color: #fff;
    padding: 80px 0 20px;
}

.space_gallery span.title-text, .space-gal span.title-text, .blog-section span.title-text {
    position: absolute;
    left: 0px;
    width: 100%;
    top: 10px;
    text-align: center;
}
span.title-text {
    position: relative;
    display: block;
    font-size: 250px;
    line-height: 200px;
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    color: rgba(255, 255, 255, 1);
    text-shadow: -2px -2px 0 #ebf2f6, 2px -2px 0 #ebf2f6, -2px 2px 0 #ebf2f6, 2px 2px 0 #ebf2f6;
}
.icon-btn--project {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    background-color: #00708d!important;
}
.icon-btn--project[data-slick-prev=".project-carousel"] {
    left: -15%;
	color:#fff!important;
}
.icon-btn--project[data-slick-next=".project-carousel"] {
    right: -13%;
	color:#fff!important;
}
.project-carousel svg{
	color:#fff!important;
}
.feature-area .feature-img {
    position: relative;
    width: 100%;
    height: 100%;
}
.view_all_btn {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.contact_img {
    /* padding: 100px; */
    /* position: relative; */
    z-index: 1;
    margin-left: 20px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.contact_img img {
    border-radius: 20px;
    aspect-ratio: 1 / 1.012;
    border-bottom: 5px solid #8f2004 !important;
}
.blg_pd {
    padding: 80px 0 10px;
}

.space-gal, .blog-section {
    position: relative;
}
.vs-blog--style2 .vs-blog__date {
    display: inline-block;
    background-color: #8f2004;
    color: #fff;
    padding: 7px 18px;
    letter-spacing: 0.3px;
    font-weight: 500;
    margin: 0 0 0 -1px;
    border-radius: 20px;
}
.vs-blog--style2 .vs-blog__title--link {
    color: var(--title-color);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vs-blog--style2 .vs-blog__title {
    font-size: 20px!important;
    padding: 0;
    font-weight: 500;
    text-transform: capitalize;
    letter-spacing: 0.34px;
    margin-bottom: 0;
    margin-top: 20px;
}
.vs-blog--style2 .vs-blog__img--container::before,.vs-blog:hover .vs-blog__img--overlay{
	display:none!important;
}
.read_more {
    padding: 18px 0;
}

.vew_all_btn{
	display:flex;
	justify-content:center;
	margin:20px 0 0;
}
.space-blog{
	padding: 80px 0 0;
    background: #fff;
}

.footer-info__title{
	font-size: 15px;
    color: #28ccf7!important;
    font-family: var(--title-font);
    text-transform: uppercase;
 
}




.page-nav-wrap ul li .page-numbers i {
  margin-top: 2px;
}

.page-nav-wrap ul li .page-numbers:hover {
  background-color: var(--theme-color);
  color: #fff;
}
body.page-id-483 .space {
    padding: 0;
}
body.page-id-483 section.space.z-index.brand_sectn {
    padding: 80px 0px;
}
.menu-title > a {
    color: #8f2004 !important;
    font-size: 18px !important;
    padding-left: 0px !important;
    pointer-events: none;
    border-bottom: 0px !important;
}
.menu-title > a:after {
    content: "" !important;
    margin-right: 0px !important;
}

@media(max-width:1024px){
	html,body{
			 overflow-x:hidden!important;
	}
	img.logo {
    max-width: 203px!important;
    }
    .custom_container h1 {
        font-size: 38px;
    }
	.header_list ul{
		flex-wrap: wrap;
	}
	.pd_150{
		padding:0!important;
	}
	.cta_section{
		display:block!important;
	}
	.cta_section a{
		margin-bottom 20px!important;;
	}
	.video-wrapper video{
		height:800px;
	}
	.marquee-slider p{
		font-size:41px!important;
	}
	.h2, h2 {
    font-size: 24px !important;
 }
	.feature-area .feature-content{
		max-width:100%!important;
		padding:0!important;
		 margin: 0 10px!important;
		
	}
	.brand_sectn .logo-itm img{
		max-width:100%!important;
	}
}

@media(min-width:1386px){
	.service-tab2 .nav-tabs{
		justify-content:center!important;
	}
	.service-tab2 .nav-tabs .nav-link{
		margin-bottom:20px;
	}
	.custom_container h1{
		padding-top: 117px;
	}
}
@media(min-width:1400px) and (max-width:1440px){
		.service-tab2 .nav-tabs{
		justify-content:center!important;
	}
	.service-tab2 .nav-tabs .nav-link{
		margin-bottom:20px;
	}
	.custom_container h1{
		padding-top: 117px;
		font-size: 52px;
	}
}
@media (max-width: 767px) {
  .page-nav-wrap ul li .page-numbers {
    margin-top: 10px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
  }
	.custom_container h1 {
        font-size: 24px!important;
		padding-top:0px;
    }
	.custom_container{
		padding: 0 10px;
	}
	.sec-title,.vs-about__title{
		font-size:20px!important;
	}
	.short-contact-about-seven{
		display:block;
	}
	.space{
		padding: 80px 0 28px!important;
	}
	 .marquee-slider p {
        font-size: 20px !important;
    }
	.header_list ul li{
	   font-size: 16px !important;
	}
	.vs-header__top-style1, .vs-header__top-style3{
		display:none;
	}
	.service-content {
      padding: 20px 12px;
   }
	.cta_section a{
    margin-bottom: 26px;
    margin-left: 20px;
	}
	.gallery-section .gallery-tab .nav-tabs{
		gap:0!important;
	}
	.contact_img{
	  margin-top: 40px;
		margin-left:unset;
	}
	.space-blog{
	  padding: 50px 0 0;
	}
	.widget-area{
		padding: 80px 0 0!important;
	}
	.blog-section .title-area{
		align-items:center!important;
	}
}

@media (max-width:375px) {
		.custom_container h1 {
   		padding-top:100px;
    }
}