*{
    padding: 0;
    margin: 0;
}

body{
    font-family: "Raleway", sans-serif;
}
p{
    color: var(--gray);
}
:root{
    --primary: #004a7f;
    --secondary: #e40068;
    --gray: #393838;
    --bg-color: #ebf3ff;
    --black: #000;
    --white: #fff;
}
section{
    padding: 50px 20px;
}
.container{
    width: 100%;
    max-width: 1366px;
    margin: 0 auto;
  
}

.primary-button,
.wpcf7-submit.has-spinner{
    padding: 12px 30px;
    background-color:var(--secondary);
    color: var(--white);
    border: none;
    font-size: 18px;
    line-height: 1.5;
    cursor: pointer;
    text-decoration: none;
}

.wpcf7-response-output{
	margin-top: 1px;
	color: var(--primary);
	font-weight: 700;
	text-align:center;
	margin-top: 10px;
}

header{
    height: 5px;
    width: 100%;
    background-color: var(--primary);
}
.grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
}

.grid-form{
	display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
}


.hero-section{
    padding: 40px 20px 100px 20px ;
    position: relative;
}
.hero-section::after{
    background-color: #ebf3ff;
    position: absolute;
    top: -90px;
    right: 0px;
    height: 100%;
    width: 40%;
    z-index: -1;
    content: "";
    clip-path: polygon(0 0,100% 100%,100% 1%);
}
.hero-content-wrapper,
.section-content-wrapper{
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: start;
}
.section-content-wrapper{
    justify-content: center;
}
.page-ul{
    padding: 0 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 12px;
}

.accent-heading{
    font-size: 18px;
    font-weight: 700;
    color: var(--secondary);
}
.section-heading{
    font-size: clamp(30px, calc(1.875rem + ((1vw - 3.2px) * 0.3824)), 34px);
    font-weight: 900;
    line-height: 1.1;
    color: var(--gray);
}
.section-text{
    font-size: 20px;
    line-height: 1.5;
    color: var(--gray);
}
.hero-heading{
    font-size: clamp(40px, calc(2.5rem + ((1vw - 3.2px) * 1.7208)), 58px);

}
.page-ul li{
    position: relative;
    list-style: none;
    font-size: 20px;
    line-height: 1;
}
.page-ul li:before{
    position: absolute;
    display: block;
    content: '';
    text-indent: -999999px;
    left: -1.4em;
    top: 5px;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-image: url(https://web.nrsinfoways.ca/wp-content/themes/web%20Template/images/li-img.svg);
    background-size: cover;
    background-position: bottom;
}
.bold-text{
    font-size: 24px;
    line-height: 1.6;
    font-weight: 900;
    margin-bottom: 12px;
}
.form-wrapper{
    padding: 32px;
    box-shadow: 0 1px 8px 0 rgba(82,156,156,.2), 0 1px 25px 0 rgba(134,173,173,.2), 0 2px 4px -1px rgba(167,214,214,.2);
    background: #fff;
    
}

.bg-color{
    background-color: var(--bg-color);
}

.wordpress-img{
    width: 100%;
    height: 100%;
    max-height: 500px;
    object-fit: contain;
}

.support-img{
    width: 100%;
    height: 100%;
    max-height: 500px;
    object-fit: contain;
}
.customer-img{
    width: 100%;
    height: 100%;
    max-height: 500px;
    object-fit: contain;
}

.screen-img{
    width: 100%;
    height: 100%;
    max-height: 600px;
    object-fit: contain;
}

.mobile-img{
    width: 100%;
    height: 100%;
    max-height: 400px;
    object-fit: contain;
}
.image-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
}

.feature-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.feature-cards-wrapper{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    width: 100%;
}

.feature-card{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.feature-card__img{
    width: 80px;
}

.feature-card__text{
    font-weight: 700;
    font-size: 20px;;
}
.slider-section__content-wrapper{
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    margin-bottom: 3rem;
}
.slider-section__content-wrapper :where(p,h2){
    text-align: center;
}

.slider_img{
    width: 100%;
    border: 1px solid var(--gray);
}

.splide__arrow{
    background-color: var(--primary) !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
}

.splide__arrow svg{
    fill: var(--white) !important;
}
.slider-wrapper{
    padding: 0 20px;
}

.review-section .container{
    width: 100%;
    max-width: 800px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.review-section :where(p,h2){
    text-align: center;
}
.star-icon{
    width: 30px;
    object-fit: contain;
}


footer{
    padding: 30px 20px 20px 20px;
    background-color: var(--bg-color);


}

.footer-inner{
    display: flex;
    flex-direction: column;
    flex-direction: column;
    align-items: center;
   
    gap: 8px;
}
.copyright-text{
	font-size: 12px;
}
.footer_link-wrapper{
    display: flex;
    gap: 20px;
}
.copyright-text a,
.footer-link{
    text-decoration: none;
    color: #000;
    transition: all 0.2s ease-in-out;
	font-size: 12px;
}
.copyright-text a:hover,
.footer-link:hover{
    color: var(--secondary);
}

.logo{
    width: 100%;
    max-width: 140px;
}

.logo-section{
    padding: 24px 20px 0 20px;
}

.screen-reader-response{
	display:none;
}

span.wpcf7-form-control-wrap {
    display: flex;
    flex-direction: column;
	margin-bottom: 20px;
}
input.wpcf7-form-control {
       padding: 11px 15px;
    border-radius: 0 !important;
    border: 1px solid #dadbdd;
}

span.wpcf7-not-valid-tip {
    font-size: 12px;
    color: red;
}

 label{
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.form-text{
	    font-size: 10px;
    text-align: center;
	margin-top: 16px;
	color: var(--black);
	line-height: 1.4;
}

.wpcf7-submit.has-spinner{
	display:flex;
	margin: 0 auto;
}






.splide__pagination {
      bottom: -1.5em !important;
}
.splide__pagination__page{
	background: #fff !important;
	
}
.splide__pagination__page.is-active{
	background: var(--secondary) !important;
}



@media (max-width: 992px){
    .grid,
    .feature-cards-wrapper{
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
	.grid-form{
		grid-template-columns: repeat(1, minmax(0, 1fr));
		gap: 0;
	}
    .feature-card{
        justify-content: center;
    }
    .feature-card__img{
        width: 50px;
    }
    .feature-inner .section-heading{
        text-align: center;
    }
	section{
		    padding: 38px 20px;
	}
}