/* --------------------------------------------------- */
/* ----------- Global CSS ALL viewports--------------- */
/* -------------------------------------------------- */

/* ----------------- navbar ----------------------- */

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    color: rgba(184 199 60 / 50%);
}


/* ----------------- Footer ----------------------- */
.lower-footer {
    background-color: black;
    color: white;
}

footer a {
    color: black;
    text-decoration: none;
}

footer a:hover {
    color:rgb(184 199 60 / 50%);
    text-decoration: none;
}


/* --------------------- index image ------------------- */

.container-fluid{
    padding-right: 0px;
    padding-left: 0;
    margin-right: 0;
    margin-left: 0;
    
}

.cover-img {
    background-color: black;
    opacity: .90;
    height: 100%;
    width: 100%;
    padding-top: 50px;
}

.image-container{
    overflow: hidden;
}

.title-text{
    color: rgb(255, 255, 255);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    letter-spacing: .2px;
    line-height: .9em;
    max-width: 40vw;
}


/* --------------------- index portfolio ------------------- */

.elementMargin{
    margin-top: 80px;
}

a {
    color: black;
    text-decoration: none;
}

a:hover {
    color:rgb(184 199 60 / 50%);
    text-decoration: none;
}



/* --------------------- Contact form container ------------------- */

.form{
    padding-top: 100px;

}

 /* Small size displays  ----------------------------------- */
@media only screen and (max-width: 767px){


    /* --------------------------------------- */
    /* ----------- nav bar CSS --------------- */
    /* --------------------------------------- */
    .navbar {
        background-color: black;
    }

    .logo-img {
        max-height: 60px; /* adjust to your preferred height */
        width: auto;
    }

    .nav-link:hover {
        color: rgb(184 199 60 / 50%);
    }



    /* --------------------------------------- */
    /* ----------- index CSS --------------- */
    /* --------------------------------------- */
    .image-container h2{
        font-size: 36px !important;
        font-family: baskerville;
        font-weight: 300;
    }

    .card{
        margin-top: 30px;
    }    
    
}

/* Medium size displays ---------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 1180px){


    /* --------------------------------------- */
    /* ----------- nav bar CSS --------------- */
    /* --------------------------------------- */
    .navbar {
        background-color: black;
    }

    .logo-img {
        max-height: 60px; /* adjust to your preferred height */
        width: auto;
    }
    .nav-link:hover {
        color: rgb(184 199 60 / 50%);
    }

    


    /* --------------------------------------- */
    /* ----------- index CSS --------------- */
    /* --------------------------------------- */
    .image-container h2{
        font-size: 65px !important;
        font-family: baskerville;
        font-weight: 300;
    }

    .card-title{
        font-size: 1.1rem;
    }
    
    .second-containerr{
        margin-top: 50px;
    }

    .img-fluid {
        width: 100%;
        height: 150px;
        object-fit: cover;
    }
}

/* Big size displays -------------------------------------- */
@media only screen and (min-width: 1181px){

    /* --------------------------------------- */
    /* ----------- nav bar CSS --------------- */
    /* --------------------------------------- */
    .navbar {
        background-color: black;
    }

    .logo-img {
        max-height: 60px; /* adjust to your preferred height */
        width: auto;
    }
    .nav-link:hover {
        color: rgb(184 199 60 / 50%);
    }


    
    /* --------------------------------------- */
    /* ----------- index CSS --------------- */
    /* --------------------------------------- */
    .image-container h2{
        font-size: 65px !important;
        font-family: baskerville;
        font-weight: 300;
    }

    .card-title{
        font-size: 1.5rem;
    }

    .second-containerr{
        margin-top: 50px;
    }

    .img-fluid {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
}