@font-face {
    font-family: "pirulen";
    src: url('../fonts/pirulen.ttf');
}

body, html { 
    height: 100%;
    margin: 0;
    font-family: sans-serif;
    /*background: #fcfcfc;*/
}

body::-webkit-scrollbar {
    width: 0.25rem;
}

body::-webkit-scrollbar-track {
    background: #1e1e24;
}

button {
    background-color: #3c6ce8;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    border-radius: 4px;
    display: inline-block;
    font-size: 12px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

button:hover {
    background-color: #274cab;
    text-decoration: underline;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

button.button-submit {
    background-color: #58cf34;
    cursor: pointer:
}

button:hover.button-submit {
    background-color: #45a12a;
    cursor: pointer:
}

.content {
    padding: 2em;
    background: #f7f7f7;
}

/* MAIN HERO  */

#main-hero {
    width: 100vw;
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;
    
    text-align: center;

    background-image: linear-gradient(rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.6)), url("../img/cell-tower.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#main-hero h1 {
    font-family: 'pirulen';
    color: white;
    font-size: 3em;
    text-shadow: 1px 1px 10px black;
}

#main-hero h2 {
    font-family: 'pirulen';
    color: white;
    font-size: 1em;
    text-shadow: 1px 1px 10px black;
}

#hero-logo {
    scale: 70%;
}

/* SERVICES */
  
#services-hero {
    width: 100vw;
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;
    
    text-align: center;

    background-image: linear-gradient(rgba(0, 0, 0, 0.65),rgba(0, 0, 0, 0.65)), url("../img/cell-tower-1.jpeg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#services-hero {
    padding: 2em;
    font-family: sans-serif;
    color: white;
    font-size: 2.5em;
    text-align: left;
}

#services-hero p, li, a {
    font-family: sans-serif;
    font-size: 16px;
    color: white;
    text-align: left;
}

.services-grid {
    display: flex;
    column-count: 3;
    column-width: auto;
}

.services-grid h1 {
    font-size: 32px;
}

/* CONTACT FORM */

#contact-hero {
    width: 100vw;
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;
    
    text-align: center;
    
    background-image: linear-gradient(rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.6)), url("../img/gettyimages-cell-broadcasting-towers.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#contact-hero h1 {
    font-family: sans-serif;
    width: 400px;
    color: white;
    font-size: 2.5em;
    padding: 0px;
    margin: 0px;
    text-shadow: 1px 1px 10px black;
}

#contact-hero p {
    font-family: sans-serif;
    color: white;
}

input[type=text] {
    width: 100%;
    padding: 10px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=email] {
    width: 100%;
    padding: 10px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=tel] {
    width: 100%;
    padding: 10px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

textarea {
    width: 100%;
    padding: 10px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* FOOTER */

.footer {
    font-family: sans-serif;
    background: #2a2b2a;
    color: white;
    padding: 1em;
    font-size: 12px;
}

.footer-grid {
    column-count: 2;
    column-width: 100%
    column-fill: auto;
}

#sdvosb-logo {
    width: 100px;
    height: auto;
    float: right;
}

.footer a {
    font-family: sans-serif;
    color: white;
}

#copyright {
    text-align: center;
    padding: none;
    font-size: 8pt;
}