/* https://codepen.io/DuskoStamenic/pen/ZEvBKdw */
@import "https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap";

html {
    scroll-behavior: smooth;
}


:root {
   /* --color: rgb(63 63 63);*/

    /*--color: rgb(12 19 207);*/


}

body {
    margin: 0;
    font-family: Poppins, sans-serif;
}

.parallax-container-home {
    display: flex;

/*
    min-height: 100vh;
*/

    min-height: 50vh;


    flex-direction: column;
    /*
    align-items: center;
   */
    justify-content: center;

    /*  this is where the magic happens:  */
    background-attachment: fixed;
    background-image: url("../../pics/abstract.jpg.xhtml");
    background-position: center;
    background-size: cover;
    --color: rgb(63 63 63);
    color: var(--color);
   /*
    row-gap: 4rem;
*/
    text-align: center;
}



.parallax-container-coding {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /*  this is where the magic happens:  */
    background-attachment: fixed;
    --color: rgb(63 63 63);


    background-image: url("../../pics/coding.jpg.xhtml");


    background-position: center;
    background-size: cover;
    color: var(--color);
    row-gap: 2rem;

    text-align: center;
}



.parallax-container-offer {
    display: grid;
    flex-direction: row;
    flex-wrap: wrap;

    align-items: stretch; /* Ensure all items stretch to the same height */
  /*
    align-items: center;
    */

    justify-content: center;


    padding: 6rem 0;
    /*
    background-image: url(https://images.unsplash.com/photo-1585424536945-26663ea69d52?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=876&q=80);
*/

    /*
    background-image: url("../../pics/coding.jpg.xhtml");
*/
    gap: 1.6em;

    grid-template-columns: repeat(4, 1fr);
}
/*
@media (max-width: 1200px) {
    .parallax-container-offer {
        grid-template-columns: repeat(3, 1fr);
    }
}
*/
@media (max-width: 1050px) {
    .parallax-container-offer {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .parallax-container-offer {
        grid-template-columns: 1fr;
    }
}

.parallax-container-map {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /*  this is where the magic happens:  */
    background-attachment: fixed;

    background-image: url("../../pics/abstract.jpg.xhtml");

    background-position: center;
    background-size: cover;
    --color: rgb(63 63 63);
    color: var(--color);
    row-gap: 4rem;

    text-align: center;
}

.parallax-container-cv {
    display: flex;

    min-height: 50vh;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    /*  this is where the magic happens:  */
    /*
    background-attachment: fixed;
    */
    background-image: url("../../pics/abstract.jpg.xhtml");

   /*
    background-image: url("../../pics/coding.jpg.xhtml");
   */
    background-position: center;
    background-size: cover;
    --color: rgb(63 63 63);
    color: var(--color);
    row-gap: 4rem;

    text-align: center;
}

.buffer {
    width: 100%;
    min-height: 60vh;
   /* background-color: var(--color);
    background-image: url("../../pics/test-pic.png.xhtml");

    background-image: url("../../pics/3ndata-buffer.jpg.xhtml");*/

    background-image: url("../../pics/1918.jpg.xhtml");

}

h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-top: 1em;
    /*
    margin: 0;

     */
}

p {

/*
    max-width: 100ch;
  */
    padding: 1em;
    line-height: 1.5;
    text-align: center;
}

div.cards a {
    display: inline-block;
    padding: 1em 3.5em;
    border-radius: 0.3em;
    --color: rgb(63 63 63);
    background-color: var(--color);
    color: white;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    text-transform: uppercase;

    margin-top: auto; /* Push the button to the bottom */
}

h3 {
    margin-top: 1em;
    font-size: 1.6rem;
    font-weight: 700;
}

.cards {
    display: flex;
    max-width: 320px;
    flex-direction: column;
    align-items: center;

    flex: 1 !important; /* Each card takes up equal space */

    padding-bottom: 1rem;
    border-radius: 0.5em;

    background-color: white;
    box-shadow: 0 29px 38px -15px rgb(0 0 0 / 43%);
}

.cards-img {
    width: 100%;
    height: 200px;
    border-radius: 0.3em;
    background-position: center;
    background-size: cover;
}

.cards:nth-of-type(1) .cards-img {
    /*
    background-image: url(https://images.unsplash.com/photo-1551632811-561732d1e306?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
   */
    background-image: url("../../pics/htmlCode.jpg.xhtml");

}

.cards:nth-of-type(2) .cards-img {
 /*
    background-image: url(https://images.unsplash.com/photo-1522163182402-834f871fd851?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1606&q=80);
*/
    background-image: url("../../pics/consulting.jpg.xhtml");
}

.cards:nth-of-type(3) .cards-img {
  /*
    background-image: url(https://images.unsplash.com/photo-1628746404106-4d3843b231b3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8Y2F2aW5nfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60);
*/
    background-image: url("../../pics/infrastructure.jpg.xhtml");
}

.cards:nth-of-type(4) .cards-img {

    background-image: url("../../pics/cv.jpg.xhtml");
}





* {
    box-sizing: border-box;
}
body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    margin: 0;
    min-height: 100vh;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1,
h2,
h3,
a {
    /*
    color: #34495e;
    */
    color: rgb(63 63 63);

}

a {
    text-decoration: none;
}



.logo {
    margin: 0;
    font-size: 1.45em;
    display: flex;
}

.main-nav {
    margin-top: 5px;

}
.logo a,
.main-nav a {
    padding: 10px 15px;
    text-transform: uppercase;
    text-align: center;
    display: block;
}

.main-nav a {
    color: #34495e;
    font-size: .99em;
}

.main-nav a:hover {
    color: #718daa;
}



.header {
    padding-top: .5em;
    padding-bottom: .5em;
    border: 1px solid #a2a2a2;
    background-color: #f4f4f4;
    -webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}


/* =================================
  Media Queries
==================================== */




@media (min-width: 769px) {
    .header,
    .main-nav {
        display: flex;
    }
    .header {
        flex-direction: column;
        align-items: center;
        .header{
            width: 80%;
            margin: 0 auto;
            max-width: 1150px;
        }
    }

}

@media (min-width: 1025px) {
    .header {
        flex-direction: row;

        justify-content: space-between;
    }

}

.footer-class {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;

    height: 4rem;

    display: flex;
    justify-content: right;

    color: var(--color);

    margin:0;

 /*   margin-right: auto;*/

    padding-top: .5em;
    padding-bottom: .5em;
    border: 1px solid #a2a2a2;
    background-color: #f4f4f4;
    -webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

}

.footer-language {
    margin-top: 5px;
    display: flex;
    justify-content: right;

}

.footer-language a {
    padding: 10px 15px;
    text-transform: uppercase;
    text-align: center;
    display: block;
}

.footer-language a {
    color: #34495e;
    font-size: .99em;
}

.footer-language a:hover {
    color: #718daa;
}

.footer-close-button {
    padding-right: 10px;
}

body .ui-button {

    margin-left: 1em !important;
    margin-right: 1em !important;
    margin-top: 0.3em !important;

}

body .ui-button.ui-button-icon-only {
    width: 2rem !important;

}

body .ui-button.rounded-button.ui-button-icon-only {
    height: 2rem !important;
}

.footer-class-small {
    position: fixed;
    left: 2rem;
    bottom: 0;
    width: 3rem;

    height: 4rem;

    display: flex;
    justify-content: center;

    color: var(--color);

    margin:0;

    /*   margin-right: auto;*/

    padding-top: .5em;
    padding-bottom: .5em;
    border: 1px solid #a2a2a2;
    background-color: #f4f4f4;
    -webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

}

.footer-language-flags span:hover {
    /*
    border: 1px solid #a2a2a2;
    */
    -webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75);


}

.stickyHeader {

    /*
    position: -webkit-sticky;
*/
    position: sticky;
    top: 0;
    z-index: 1000; /* Ensure it is on top of other elements */
}