/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

    .hero-heading-h1 {
        font-size: 15vw;
        line-height: 1.1;
        padding: 0 10%;
    }

    .hero-heading-h5 {
        font-size: 4vw;
        padding: 5% 20% 0 20%;
    }

    /* secondary pages  */
    .hero-sec-page-h1{
        font-size: 6vw;
    }


    /*** 1.2 - Values ***/
    .hm-values-p {
        font-size: 1.30rem;
        padding: 3% 15% 0;
    }

    /* hm-services */
    .hm-services-h3 {
        font-size: 1.7rem;
    }

    /* hm-contact */
    .hm-contact-typography{
        padding: 25% 20%;   
    }
    /* vacancies */
    .vacancies-h3 {
        font-size: 1.7rem;
    }

    /* vacancies-contact */
    .vacancies-contact-typography{
        padding: 25% 20%;   
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

    /* global  */
    
    /* containers */
       .cas-container-lg{
        padding: 10% 10%;
    }

    /*** Navigation Bar ***/
    .navbar {
        padding: 2%;
    }

    .constellation-bg {
        margin: -20vmax;
        height: 40vmax;
        width: 40vmax;
    }

    .constellation-fg {
        margin: -22.2vmax;
        height: 44.4vmax;
        width: 44.4vmax;
    }

    .hero-heading-h1 {
        font-size: 12vw;
        line-height: 1.1;
        padding: 0 10%;
    }

    .hero-heading-h5 {
        font-size: 3.5vw;
        padding: 5% 25% 0 25%;
    }

    /* secondary pages  */
    .hero-sec-page-h1{
        font-size: 4vw;
    }
    .secondary-pages-heading{
        padding: 0;
    }

    /*** 1.2 - Values ***/
    .hm-values-block {
        padding: 25% 0;
    }

    .hm-values-h4 {
        font-size: 2.5rem;
    }

    .hm-values-p {
        font-size: 1.30rem;
        padding: 3% 25% 0;
    }

    /* hm-services */
    .hm-services-h3 {
        font-size: 2rem;
    }

    /* hm-contact  */
    .hm-contact-typography{
        padding: 20%;
    }
    /* vacancies */
    .vacancies-h3 {
        font-size: 2rem;
    }

    /* vacancies contact  */
    .vacancies-contact-typography{
        padding: 20%;
    }
}

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

    .constellation-bg {
        margin: -12vmax;
        height: 24vmax;
        width: 24vmax;
        top: 50%;
        left: 70%;
    }

    .constellation-fg {
        margin: -13.5vmax;
        height: 27vmax;
        width: 27vmax;
        top: 50%;
        left: 70%;
    }

       /* containers */
       .cas-container-lg{
        padding: 6% 8%;
    }
    

    /*** 6.0 - Navigation Bar ***/
    .navbar {
        padding: .75% 5%;
    }

    .nav-login {
        background-color: var(--cas-secondary-light);
        border-radius: .5%;
    }

    ul.dropdown-menu {
        border-top: 2px solid var(--cas-secondary-light);
    }

    .dropdown-menu {
        background-color: var(--cas-dark);
        border-radius: 0;
        border: 0;
        margin: 0;
    }

    /* secondary pages */
    .hero-sec-page-h1{
        font-size: 2.75vw;
    }

    .secondary-pages-header-section{
        position: relative;
        height: 50vh;
        width: 100%;
        min-height: 200px;
    }
    



    /*** 1.2 - Contact ***/
    .hm-contact-typography {
        padding: 20% 10%;
    }

    .hero-heading-h1 {
        font-size: 7vw;
        line-height: 1.1;
        padding-left: 0;
        padding-right: 40%;
        text-align: left;
    }

    .hero-heading-h5 {
        font-size: 2vw;
        padding-left: 0;
        text-align: left;
    }

    .hm-compass-bg,
    .hm-compass-middle,
    .hm-compass-fg {
        margin: -15vmax;
        width: 30vmax;
        height: 30vmax;
    }

    /*** 1.3 - Values ***/
    .hm-values-block {
        padding: 15% 0;
    }

    .hm-values-h4 {
        font-size: 2rem;
    }

    .hm-values-p {
        font-size: 1.2rem;
        padding: 3% 15% 0;
    }

    .hm-values-img {
        height: 100%;
    }

    /*** hm - about ***/
    .hm-about-h3 {
        font-size: 2.5rem;
        width: 75%;
    }

    /*** 1.3 - Contact ***/
    .hm-contact-block {
        height: 100%;
    }

    .hm-contact-typography {
        padding: 25% 15%;
    }

    /* featured services */
    .hm-services {
        padding: 5%;
    }

    .hm-services-h3 {
        font-size: 1.25rem;
    }

    /* vacancies */
    .vacancies {
        padding: 5%;
    }

    .vacancies-h3 {
        font-size: 1.25rem;
    }

    /*** 1.2 - Contact ***/
    .vacancies-contact-typography {
        padding: 20% 10%;
    }

    .vacancies-compass-bg,
    .vacancies-compass-fg {
        margin: -15vmax;
        width: 30vmax;
        height: 30vmax;
    }

    /*** 4.3 - Financial ***/
    .financial-img {
        height: 100%;
        }

}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    /* containers */
    .cas-container-lg{
        padding: 6% 10%;
    }

    /*** 1.3 - Values ***/
    .hm-values-block {
        padding: 17% 0;
    }

    .hm-values-h4 {
        font-size: 2.2rem;
    }

    .hm-values-p {
        font-size: 1.3rem;
        padding: 3% 15% 0;
    }

    /* Home - about */
    .hm-services {
        padding: 5%;
    }


    /* Vacancies */
    .vacancies {
        padding: 5%;
    }

    /* headings secondary */
    .hero-sec-page-h1{
       font-size: 2.75vw;     
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    /* buttons */
    .btn-outline-secondary,
    .btn-outline-light,
    .btn-outline-primary{
        padding: 1.5% 3.5%;
    }
    /* Typography  */
    h2 {
        font-size: 3.5rem;
    }

    .lead-xxl{
        font-size: 1.5rem;
    }

    /* headings secondary */
    .hero-sec-page-h1{
       font-size: 2.75vw;     
    }

    .small-text{
        font-size: .9rem;
    }

    .constellation-bg {
        left: 65%;
    }

    .constellation-fg {
        left: 65%;
    }

    .hero-heading-h1 {
        font-size: 5vw;
        line-height: 1.1;
        padding-left: 0;
        padding-right: 40%;
        text-align: left;
    }

    .hero-heading-h5 {
        font-size: 1.2vw;
        padding-left: 0;
        padding-top: 2%;
        text-align: left;
    }

    /* containers  */

    .cas-container{
        padding: 2% 10%;
    }

    .cas-container-lg{
        padding: 6% 10%;
    }

    /* footer */
    .footer-ad{
        width: 50%;
    }
    /*** 1.2 - Values ***/
    .hm-values-block {
        padding: 14% 0;
    }

    .hm-values-p {
        font-size: 1.5rem;
        padding: 3% 20% 0;
    }

    .hm-about-p {
        font-size: 1.5rem;
    }

    /*** 1.2 - Services ***/
    .hm-services {
        padding: 6%;
    }

    .hm-services-h3 {
        font-size: 1.5rem;
    }

    .hm-services-p {
        font-size: 1.1rem;
    }

    /*** Home - Contact ***/

    .hm-contact-typography {
        padding: 30% 15%;
    }

    /*** Vacancies ***/
    .vacancies {
        padding: 6%;
    }

    .vacancies-h3 {
        font-size: 1.5rem;
    }

    .vacancies-p {
        font-size: 1.1rem;
        padding: 0 20% 2%;
    }

    .vacancies-img {
        padding: 0;
        width: 45%;
        margin-bottom: 3%;
    }

    .vacancies-card{
        padding: 10%;
    }


    .vacancies-contact-block {
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        position: relative;
    }
    .vacancies-contact-typography-h2{
        width: 60%;
    }

    .vacancies-compass-bg,
    .vacancies-compass-fg {
        height: 22vmax;
        width: 22vmax;
        transform: translate(-50%, -50%);
        margin: -11vmax;
        position: absolute;
        left: 50%;
        top: 50%;
    }
    /* News */
    .news-h3{
        font-weight: 600;
        font-size: 1.5rem;
    }
}