/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .cta-contact{
        width: 100%;
        text-align: center;
        color: var(--main-bg-color);
        background-color: var(--alt-bg-color);
        padding: 25px;
        box-sizing: border-box;
    }
    
    .cta-contact h1{
        margin: 0;
        padding: 0;
    }
    
    .placeholder{
        width: 100%;
        text-align: center;
        color: var(--main-bg-color);
        background-color: var(--alt-bg-color);
        padding: 25px;
        font-size: 1.5em;
        box-sizing: border-box;
    }
    .placeholder img{
        width: 50%;
        margin: auto;
    }
    
    header{
        width: 100%;
    }
    
    .service-desc .col{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .thumb{
        background-size: cover;
        background-position: 50%;
        height: 30vh;
    }

    .service-desc{
        display: flex;
        flex-direction: column;
    }
    .reachout{
        display: flex;
        flex-direction: row !important;
        align-items: center !important;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .cta-contact{
        width: 100%;
        text-align: center;
        color: var(--main-bg-color);
        background-color: var(--alt-bg-color);
        padding: 25px;
        box-sizing: border-box;
    }
    
    .cta-contact h1{
        margin: 0;
        padding: 0;
    }
    
    .placeholder{
        width: 100%;
        text-align: center;
        color: var(--main-bg-color);
        background-color: var(--alt-bg-color);
        padding: 25px;
        font-size: 1.5em;
        box-sizing: border-box;
    }
    .placeholder img{
        width: 50%;
        margin: auto;
    }
    
    header{
        width: 100%;
    }
    
    .service-desc .col{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .thumb{
        background-size: cover;
        background-position: 50%;
        height: 30vh;
    }

    .service-desc{
        display: flex;
        flex-direction: column;
    }
    .reachout{
        display: flex;
        flex-direction: row !important;
        align-items: center !important;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .cta-contact{
        width: 100%;
        text-align: center;
        color: var(--main-bg-color);
        background-color: var(--alt-bg-color);
        padding: 25px;
        box-sizing: border-box;
    }
    
    .cta-contact h1{
        margin: 0;
        padding: 0;
    }
    
    .placeholder{
        width: 100%;
        text-align: center;
        color: var(--main-bg-color);
        background-color: var(--alt-bg-color);
        padding: 25px;
        font-size: 1.5em;
        box-sizing: border-box;
    }
    .placeholder img{
        width: 50%;
        margin: auto;
    }
    
    header{
        width: 100%;
    }
    
    .service-desc .col{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .thumb{
        background-size: cover;
        background-position: 50%;
        height: 30vh;
    }

    .service-desc{
        display: flex;
        flex-direction: column;
    }
    .reachout{
        display: flex;
        flex-direction: row !important;
        align-items: center !important;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .service-desc{
        display: flex;
        flex-direction: row;
    }
    .cta-contact{
        width: 100%;
        text-align: center;
        color: var(--main-bg-color);
        background-color: var(--alt-bg-color);
        padding: 25px;
        box-sizing: border-box;
    }
    
    .cta-contact h1{
        margin: 0;
        padding: 0;
    }
    
    .placeholder{
        width: 100%;
        text-align: center;
        color: var(--main-bg-color);
        background-color: var(--alt-bg-color);
        padding: 25px;
        font-size: 1.5em;
        box-sizing: border-box;
    }
    .placeholder img{
        width: 20%;
        margin: auto;
    }
    
    header{
        width: 100%;
    }
    
    .service-desc .col{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    
    .thumb{
        background-size: cover;
        background-position: 50%;
        height: 30vh;
    }

    .reachout{
        display: flex;
        flex-direction: row !important;
        align-items: center !important;
    }
}