@font-face {
    font-family: "Francois One";
    src: local("Francois One"), url("../fonts/francoisoneregular.woff2") format('woff2');
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    font-weight: 300;
    src: local("Roboto"), url("../fonts/robotolight.woff2") format('woff2');
    font-display: swap;
} 

.hero { 
    background-color: #666;
	background-image: url('/img/Fitchburg_audience.webp');
	background-size: cover;
    background-repeat: no-repeat;
	background-position: center;
	padding: 100px 25px;
}

.hero h1 {
    color: #fff;
    font-family: "Francois One", "Sans-Serif";
    text-shadow: rgb(0, 0, 0) 0px 0px 12px; 
    line-height: 3rem;
    font-size: 2.4rem;
    text-align: center;
}

.subtitle {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 25px 0px 25px; 
}

.subtitle h2 {
    font-family: "Francois One", "Sans-Serif";
    font-size: 2rem;
    line-height: 3rem; 
    color: rgb(102, 0, 0);
    text-align: center;
}

* {
    margin: 0px;
    padding: 0px; 
    box-sizing: border-box;
} 

strong {
    font-weight: 700;
}

header {
    background-color: #000;
}

.header-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center; 
    max-width: 1100px;
    height: 100px;
    padding: 0px 25px;
    margin: 0 auto;
}

header img { 
    max-width: 250px;
}

nav {
    display: grid;
    grid-template-columns: 1fr 150px;
}

nav ul li {
    display: inline-block;
}
 
nav ul li a {
    color: #fff;
    font-family: "Roboto", "Sans-Serif";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.8rem; 
    text-decoration: none;
}  

.nav-space {
    padding-left: 10px;
    padding-right: 10px;
}

.navigation {
    display: grid;
    justify-content: end;
}

.highlighted-link {
    color: #77FF24;
}

#menu-icon {  
    width: 40px;
    display: none;
}

#close-icon {
    width: 40px;
    display: none;
}

.social-media-links ul {
    display: grid;
    grid-template-columns: repeat(3, 25px);
    gap: 15px;
    justify-content: end;
}

.social-media-links img {
    max-height: 25px;
}

p, li {
    font-family: "Roboto", "Sans-Serif";
    font-size: 1.3rem;
    line-height: 1.8rem; 
    padding: 10px 0px;
    font-weight: 300;
    color: #666; 
}

.two-cell-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.container1 ul li {
   list-style-type: none;
}

.checkmark-paragraph {
    display: block;
    overflow: hidden;
}

/*.two-cell-list ul li:before, .container1 ul li:before {
    content: ' ';
    background: url('/img/checkmark.webp');
    background-size: contain; 
    background-repeat: no-repeat;
    display: inline-block;
    height: 30px;
    width: 30px;
    padding-right: 10px;
}*/

.two-cell-list ul li {
    display: flex;
    align-items: center; 
}

.two-cell-list p {
    color: #000;
    font-weight: 400;
}

.two-cell-list li {
    padding: 5px;
}

.checkmark {
    max-width: 40px;
    float: left;
    margin-right: 15px;
}

.blue-list-item {
    color: rgb(51, 102, 255);
}

.yellow-list-item {
    color: rgb(255, 255, 0);
}

.button1, .button3 {
    text-decoration: none;
}

.button2 {
    background-color: rgb(144, 202, 11);
    color: rgb(255, 255, 255);
    text-align: center;
    border-radius: 3px;
    padding: 20px 40px; 
    width: 100%;
    margin: 0 auto;
    box-shadow: 0px 3px 10px rgba(0,0,0,.2),inset 0px -2px 0px rgba(0,0,0,.2);
    font-family: "Roboto", "Sans-Serif"; 
    text-decoration: none;
    font-size: 28px;
    text-shadow: 1px 1px 1px rgba(000,000,000,0.2);
    font-weight: 600;
    display: inline-block;
    box-sizing: border-box;
}

.button4 {
    background-color: rgb(144, 202, 11);
    color: rgb(255, 255, 255);
    text-align: center;
    border-radius: 3px;
    padding: 20px 40px; 
    max-width: 400px;
    margin: 0 auto;
    box-shadow: 0px 3px 10px rgba(0,0,0,.2),inset 0px -2px 0px rgba(0,0,0,.2);
    font-family: "Roboto", "Sans-Serif"; 
    text-decoration: none;
    font-size: 28px;
    text-shadow: 1px 1px 1px rgba(000,000,000,0.2);
    font-weight: 600;
    display: inline-block;
    box-sizing: border-box;
}

.button1 div {
    background-color: rgb(144, 202, 11);
    color: rgb(255, 255, 255);
    text-align: center;
    border-radius: 3px;
    padding: 20px 40px;
    max-width: 325px;
    margin: 0 auto;
    box-shadow: 0px 3px 10px rgba(0,0,0,.2),inset 0px -2px 0px rgba(0,0,0,.2);
}  

.button3 div {
    background-color: rgb(144, 202, 11);
    color: rgb(255, 255, 255);
    text-align: center;
    border-radius: 3px;
    padding: 20px 40px; 
    margin: 0 auto;
    box-shadow: 0px 3px 10px rgba(0,0,0,.2),inset 0px -2px 0px rgba(0,0,0,.2);
}  

.button1 span, .button3 span {
    font-weight: 400;
    font-family: "Roboto", "Sans-Serif"; 
}

.button1 span:nth-child(1), .button3 span:nth-child(1) {
    font-size: 28px;
    text-shadow: 1px 1px 1px rgba(000,000,000,0.2);
    font-weight: 600;
}

.button1 span:nth-child(3), .button3 span:nth-child(3) {
    font-size: 20px;
    text-shadow: 1px 1px 1px rgba(000,000,000,0.2); 
}



.divider {
    margin-top: 20px; 
    margin-bottom: 20px;
    border-bottom: 2px solid #90CA0B;
}

.divider2 {
    margin-top: 20px; 
    margin-bottom: 20px;
    border-bottom: 1px solid #C7C7C7;
}

.inner-container {
    max-width: 1150px;
    padding: 15px 50px;
    margin: 0 auto;
}

.container1 h2 {
    font-family: "Francois One", "Sans-Serif";
    color: rgb(144, 202, 11);
    line-height: 3rem;
    font-size: 2.4rem; 
    margin-top: 20px;
}

.container2 {
    padding-top: 15px;
    padding-bottom: 75px;
}

.featured-testimonial {
    background-color: #000;
    border-top: 3px solid #90CA0B;
    padding: 75px 50px 150px 50px; 
}

.featured-testimonial-inner {
    max-width: 900px;
    margin: 0 auto;
}

.featured-testimonial h2 {
    font-family: "Francois One", "Sans-Serif";
    color: #fff; 
    line-height: 3.5rem;
    font-size: 3rem;
    text-align: center;
}

.featured-testimonial p { 
    color: #fff;
    text-align: center;
    padding-top: 15px;
}

.container4 {
    margin-top: -150px;
    padding-bottom: 25px;
}

.container5 {
    background-color: #000;
    border-top: 3px solid #90CA0B;
    padding: 75px 25px 100px 25px
}

.testimonial-block {
    margin-top: -135px;
    padding: 25px 25px 0px 25px;
}

.testimonial-block .button2 {
    margin-bottom: 40px;
}

.container8 {
    padding-bottom: 25px;
}

.container9 {
    padding-left: 25px;
    padding-right: 25px;
}

.container12 {
    background-color: #000;
    padding-top: 60px;
    padding-bottom: 60px;
}

.container5 .inner-container {
    max-width: 950px;
}

.container5 h2 {
    color: rgb(255, 255, 255); 
    font-family: "Francois One", "Sans-Serif";
    font-size: 3.2rem;
    line-height: 3.4rem; 
    padding-bottom: 20px;
    text-align: center;
}

.container5 p {
    color: #fff; 
}

.container9 h2, .container10 h2 {
    color: #212121; 
    font-family: "Francois One", "Sans-Serif";
    font-size: 2.8rem;
    line-height: 3rem; 
    padding-bottom: 20px; 
}

.container7 h2 {
    color: #212121; 
    font-family: "Zilla Slab", "Serif";
    font-size: 2.8rem;
    line-height: 3rem; 
    padding-bottom: 20px; 
}

.container11 h2 {
    color: #212121; 
    font-family: "Francois One", "Sans-Serif";
    font-size: 2.6rem;
    line-height: 2.8rem; 
    padding-bottom: 20px; 
    text-align: center;
}

.container12 h2 {
    color: #fff; 
    font-family: "Francois One", "Sans-Serif";
    font-size: 3rem;
    line-height: 3.4rem; 
    padding-bottom: 40px; 
    text-align: center;
}

.container11 h3 {
    color: #212121; 
    font-family: "Francois One", "Sans-Serif";
    font-size: 2.2rem;
    line-height: 2.4rem;  
    text-align: center;
}

.call-out-paragraph {
    font-size: 1.5rem;
    line-height: 2.2rem; 
}

.container7 p {
    padding: 0px;
    color: rgb(0, 0, 0);
}

.container12 p {
    color: #fff;
    font-weight: 400;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.3rem;
}

.container9 img { 
    display: block;
    width: 100%;
    max-width: 650px; 
    margin: 0 auto; 
}

.signal-flow-banner {
    width: 100%;
}

.grid1 {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 50px; 
} 

.grid1 h3 {
    text-align: center;
    font-family: "Zilla Slab", "Serif";
    font-size: 2.5rem;
    line-height: 2.8rem;
    font-weight: 500;
    color: #333333; 
}

.grid1 h3, .grid1 p {
    padding-bottom: 20px;
}

.grid1 img {
    max-width: 270px;
    margin: 0 auto;
} 

.grid3 img {
    max-width: 225px;
    margin: 0 auto;
}

.grid4 img {
    max-width: 450px;
    margin: 0 auto;
}

.grid2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 25px;
}

.grid3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding-bottom: 40px;
}

.grid4, .grid5 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px; 
    align-items: center;
}

.grid4 div {
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}

.testimonial-cell {
    background-color: #fff;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, .2);
    border-radius: 8px;
    padding: 25px;  
}

.testimonial-cell-style2 {
    background-color: #fff;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, .2);
    border-radius: 15px;
    padding: 20px;
    margin: 30px 0px;
}
 
.testimonial-cell img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 10px;
}

.testimonial-cell h3 {
    font-family: "Roboto", "Sans-Serif";
    font-size: 1.3rem;
    line-height: 1.7rem; 
}

.testimonial-cell p {
    font-size: 1.1rem;
    line-height: 1.6rem; 
}

.testimonial-name {
    color:#90CA0B;
    padding: 0px;
}

.testimonial-role {
    padding: 0px;
}

.testimonial-cell-style2 h3 {
    font-size: 1.7rem;
    font-family: "Roboto", "Sans-Serif";
    font-weight: 700;
    line-height: 2rem;
    color: #000;
} 

.testimonial-cs2-header {
    display: grid;
    grid-template-columns: 110px 3fr;
    align-items: center;
}

.testimonial-cs2-header p {
    padding: 0px;
}

.testimonial-cs2-header img { 
    border-radius: 50px;
}

.testimonial-cs2-name {
    font-size: 1.3rem;
    color: #000;
    font-weight: 600;
    font-family: "Roboto", "Sans-Serif";
}

.testimonial-cs2-role, .testimonial-cs2-church {
    font-size: 1rem;
    color: #90CA0B;
    font-weight: 400;
    font-family: "Roboto", "Sans-Serif";
}

.demo-videos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 25px;
    padding: 15px;
  }
  
  .iframe-video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
  }
  
  .iframe-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .fixed-button { 
    background-color: #000;
    padding: 10px;
    position: fixed;
    bottom: 0px;
    width: 100%;
    text-align: center;
  }

  .fixed-button p {
    color: rgb(255, 255, 0);
    border-radius: 25px;
    font-family: "Francois One", "Sans-Serif";
    line-height: 1.7rem;
    font-size: 1.6rem;
    text-align: center;
    text-decoration: none; 
    padding-left: 15px;
    padding-right: 15px;
  }

  .link-container {
    width: 100%; 
    max-width: 1140px; 
    margin: 0 auto;
    border: 3px solid rgb(255, 255, 0);
    border-radius: 50px; 
  }

  footer {
    padding-top: 15px;
    padding-bottom: 100px;
  }

  footer ul li {
    display: inline-block;
  }
 
  footer p {
    color: #424242;
    font-family: "Roboto", "Sans-Serif";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.8rem; 
    padding-left: 10px;
  }

  footer ul li a {
    color: #424242;
    font-family: "Roboto", "Sans-Serif";
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.8rem; 
    text-decoration: none;
  }  

  .footer-social-media-links ul {
    display: grid;
    grid-template-columns: repeat(4, 25px);
    gap: 15px;
    justify-content: end;
  }

  .footer-social-media-links img {
    max-height: 25px;
  }

  @media screen and (max-width: 1200px) {
    .inner-container {
    max-width: 1050px;
    }

    .subtitle {
    max-width: 1000px;
    }

    .subtitle h2 {
    font-size: 1.8rem;
    line-height: 2.8rem; 
    } 

    .grid1 {
        grid-template-columns: 1fr;
    }

    .grid2 {
    grid-template-columns: 1fr;
    max-width: 750px;
    margin: 0 auto;
    }

    .grid3 {
        grid-template-columns: 1fr;
    }

    .grid4 {
        grid-template-columns: 1fr;
    }

    .grid5 {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 10px;
    }

    .footer-social-media-links {
        margin: 0 auto;
    }

    .grid4 div {
        max-width: 500px;
        margin: 0 auto;
    }

    .grid4 img {
        width: 100%;
        max-width: 700px; 
    } 

    #links {
        display: none;
    }
    
    #menu-icon {
        display: block;
    }
    
    nav {
        border-top: 1px solid rgba(255, 255, 255, .1); 
        background: #000;
        width: 100%; 
        position: absolute;
        left: 0px; 
        top: 100px;
    }

    nav ul li {
        display: block; 
        text-align: center;
    }

    .social-media-links ul {
        justify-content: center;
    }
} 

@media screen and (max-width:767px) {
	.hero {
    background-color: #666;
	background-image: url('/img/Fitchburg_audience-767px.webp');
	}

    .hero h1 {
        line-height: 2rem;
        font-size: 1.45rem;
    }

    .subtitle h2 {
        font-size: 1.4rem;
        line-height: 2.1rem; 
    }

    .demo-videos {
        grid-template-columns: 1fr;
        padding: 5px;
    } 

    .fixed-button p { 
        font-size: 1.3rem; 
        line-height: 1.4rem; 
    } 
    
    .two-cell-list {
        grid-template-columns: 1fr;
    }
    
    .inner-container {
        padding: 15px 25px;
    }

    p, li {
        font-size: 1.1rem;
        line-height: 1.8rem; 
    } 

    .featured-testimonial {
        padding: 75px 25px 150px 25px;
    }

    .featured-testimonial h2 {
        line-height: 2.2rem;
        font-size: 1.6rem;
    } 

    .container1 h2 {  
        line-height: 2rem;
        font-size: 1.6rem;
    }

    .container5 h2 {
        line-height: 2.5rem;
        font-size: 2.5rem;
    }

    .container7 h2 {
        line-height: 1.7rem;
        font-size: 1.6rem;
    }

    .container9 h2 {
        line-height: 2rem;
        font-size: 1.5rem;
    } 

    .container10 h2, .container11 h3, .container12 h2 {
        line-height: 2.3rem;
        font-size: 1.8rem;
    }  

    .call-out-paragraph {
        font-size: 1.3rem;
        line-height: 2rem;
    }

    .grid1 h3 {
        line-height: 2.2rem;;
        font-size: 1.4rem;
    }

    .grid2 {
        padding: 0px;
    }
    .container9 .inner-container, .container5 .inner-container, .testimonial-block .inner-container {
        padding: 15px 0px; 
    } 
}

@media screen and (max-width:440px) {
	.hero {
    background-color: #666;
	background-image: url('/img/Fitchburg_audience-440px.webp');
    background-size: cover;
    background-repeat: no-repeat;
	background-position: center;
	}
}