:root {
    --ss-primary: #20667a;
    --ss-primary-light: #3a8499;
    --ss-secondary: #e85629;
    --ss-light: #e6e6e6;
    --ss-light-darker: #d0d0d0;
    --ss-dark: #333;
    --ss-dark-accent: #002b36;
}

.ss-btn-primary {
    background-color: var(--ss-primary);
    border-color: var(--ss-primary);
}

.ss-btn-primary:hover {
    background-color: var(--ss-dark-accent);
    border-color: var(--ss-dark-accent);
}

.ss-btn-primary-l-outline {
    background-color: var(--ss-primary);
    border-color: var(--ss-primary);
}

.ss-btn-primary-l-outline:hover {
    background-color: var(--ss-dark-accent);
    border-color: var(--ss-light);
}

.ss-btn-primary-h-secondary {
    background-color: var(--ss-primary);
    border-color: var(--ss-primary);
}

.ss-btn-primary-h-secondary:hover {
    background-color: var(--ss-secondary);
    border-color: var(--ss-secondary);
}

.ss-btn-secondary {
    background-color: var(--ss-secondary);
    border-color: var(--ss-secondary);
}

.ss-btn-secondary:hover {
    background-color: var(--ss-primary);
    border-color: var(--ss-primary);
}

.ss-accent {
    color: var(--ss-secondary);
}

.ss-accent-light {
    color: var(--ss-light-darker);
}

.ss-svg-logo {
    width: 120px !important;
    height: 48px !important;
}

.ss-hero {
    background-color: var(--ss-dark-accent);
}

.ss-py-8 {
    padding-top: 120px;
    padding-bottom: 120px;
}

.ss-title {
    color: var(--ss-dark-accent);
}

.ss-text-primary {
    color: var(--ss-primary);
}

.ss-text-dark-accent {
    color: var(--ss-dark-accent);
}

.services .card-title {
    color: var(--ss-dark-accent);
}

.philosophy {
    background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.9)), url(../images/child-on-phone_compressed.png) no-repeat center/cover fixed;
    font-size: 2.5rem;
    font-family: cursive;
}

.why-us {
    /* color: var(--ss-dark-accent); */
    background-color: var(--ss-dark-accent);
}

.why-us h1 {
    color: var(--ss-primary-light);
}

.why-us h1 span {
    color: var(--ss-light-darker);
}

.why-us h4 {
    /* color: var(--ss-primary); */
    color: #bebebe;
}

.references img {
    width: 150px; /* To reduce actual image sizes */
}

.contact {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.95)), url(../images/contact-center-person_compressed.png) no-repeat center/cover;
}

.contact h1 span {
    color: var(--ss-primary-light);
}

.contacts-wrapper {
    display: inline-block;
    /* background-color: #a8e2f2; */
    /* background-color: var(--ss-dark-accent); */
    /* background-color: rgba(0, 43, 54, 0.9); */
    /* background-color: rgba(232, 86, 37, 0.2); */
    background-color: rgba(20, 20, 20, 0.7);
}

.contacts-form-wrapper {
    /* background-color: var(--ss-primary-light); */
    background-color: rgba(255, 255, 255, 0.8);
}

.contact-link {
    color: #e5eaef;
    /* color: #afc2d7; */
    /* color: #f8f9fa; */
    /* color: #a9acad; */
    text-decoration-line: none;
    font-weight: 300;
}

.contact-link:hover {
    color: var(--ss-primary-light);
    text-decoration-line: 1px solid var(--ss-primary-light);
}

.footer {
    background-color: var(--ss-dark-accent);
    color: #c4dee7;
}



/* ********************************* */

@keyframes ssbounce {
    from {bottom: 40px; background-color: #222; color: #dfdfdf;}
    95% {bottom: 40px; background-color: #222; color: #dfdfdf;}
    97% {bottom: 52px; background-color: #b2bb05; color: #dfdfdf;}
    to {bottom: 40px; background-color: #222; color: #dfdfdf;}
}


@media screen and (max-width:760px){
    

}

@media screen and (max-width:250px){
    
    

}
