* {
    box-sizing: border-box;
  }

section {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.img {
    max-width: 230px;
    height: auto; 
    background-repeat:no-repeat;
    background-size:contain;
}

.img-first-project {
    max-width: 100%;
    height: auto; 
    background-repeat:no-repeat;
    background-size:contain;
}

/* Hero banner for different sections begining */
.hero-about {
    max-width: 100%;
    min-height: 650px; 
    background-image: url(../images/about.jpg); 
    background-repeat:no-repeat;
    background-size:contain;
    margin-bottom: 250px;
}

.hero-contact {
    width: 100%;
    min-height: 650px;
    background-image: url(../images/contact.jpg);
    background-repeat:no-repeat;
    background-size:contain;
    margin-bottom: 250px;
}

.hero-work {
    width: 100%;
    min-height: 800px;
    background-image: url(../images/work.jpg);
    text-align: center;
    background-repeat:no-repeat;
    background-size:contain;
}
/* Hero banner for different sections end */

header{
    font-family: Arial, Helvetica, sans-serif;
    display: grid header;
    background-color: #f3b8db;
    padding: 5px;
    color: #F45990;
    text-align: center;
    font-size: 30px;
}

/* the navbar styling begining*/
.nav-list{
    font-family: Arial, Helvetica, sans-serif;
    padding: 5px;
    background-color: #F45990;
    color: #FCD6AC;
}

.nav-list a{
    color: #FCD6AC;
}

ul a:hover{
    font-weight: bold;
}

.nav-list { 
    text-align: center;
}

.nav-list ul li {
    display: inline; 
    padding: 10px;
}
/* navbar styling end*/


.page-section > div {
    flex: auto;
    height: 650px;
  }

.flex-container {
    display: inline-flex;
    background-color: #c59db9;
    align-items: flex-end;
    flex-direction: unset;
    background-repeat:no-repeat;
    background-size:contain;
    width: 100%;
}
 
.flex-container div {
    background-color: #b87dae;
    margin: 10px;
    padding: 10px;
    flex-direction: row;
    font-family: Arial, Helvetica, sans-serif;

}

.flexbox-item {
    color: var(--tertiary);
    min-height: 150px;
    max-height: 150px;
    flex-basis: calc(50% - 1em);
    display: flex;
    align-items: flex-end;
    padding: 0 0 20px 0;
    margin: 0.5em;
    background-blend-mode: soft-light;
    background-repeat:no-repeat;
    background-size:contain;
  }

  /* only for the first flexbox item so its shown bigger */
.flexbox-item:first-child {
    min-height: 400px;
    flex-basis: 400px;
}

.footer {
    background-color: white;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 100px

}

a{
    color:#F45990;
    text-decoration:none;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

li {
    margin-bottom: 7px;
}

/* For Desktop View */
@media screen and (max-width: 980px) {
    header {
        padding: 0 0 10px 0;
        justify-content: center;
        text-align: center;
      }

    .nav-list {
        justify-content: center;
    }

    .page-section > div {
        flex: 0 0 100%;
      }
}

/* For Tablet View */
@media screen and (max-width: 768px) {
    .flexbox-item,
    .flex-container,
    .flex-container > div,
    .flexbox-item:first-child {
        flex-basis: 100%;
        min-height: 100%;
        flex-direction: column;
    }

    .flexbox-item,
    .flex-container,
    .flex-container > div
    .flexbox-item:first-child {
        min-height: 10%;
        flex-direction: column;
      }

    .hero,
    .hero-about,
    .hero-contact,
    .hero-work {
        justify-content: center;
        text-align: center;
      }
}