.section-grid{
    display: grid;
    grid-template-columns: auto;
    column-gap: 100px;
    row-gap: 50px;
    align-items: center;
    width: 1200px;
    margin: auto;
    margin-top: 10px;
    padding: 10px;
    justify-content: center;
}

.hero_banner{
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 100px;
    align-items: center;
    width: 1200px;
    margin: auto;
    margin-top: 10px;
    padding: 10px;
    justify-content: center;
}

.name-profession-button{
    display: grid;
    grid-row: inherit;
    align-items: center;
    gap: 16px;
}

.row-project{
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 50px;
    row-gap: 89px;
}

.image-project{
    text-align: center;
    display: block;
}

.project-category{
display: grid;
}



/*Project Section*/
.project-number-title-text-link{
    display: grid;
    grid-template-rows: auto;
    row-gap: 10px;
    align-items: center;
    width: 600px;
    padding: 10px;
    margin: 10px;
}

/*Services*/
.card-section{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    column-gap: 30px;
    row-gap: 30px;
    width: auto;
    margin: auto;
    margin-top: 10px;
    padding: 10px;
    justify-content: center;
}

.service-card{
    display: grid;
    grid-template-rows: auto;
    border: 4px solid #D01C1C;
    width: auto;
    margin: 10px;
    padding: 24px;
    border-radius: 20px;
    gap: 20px;

}
.service-card:hover{
    display: grid;
    grid-template-rows: auto;
    background-color: #FEE1DB;
    width: auto;
    margin: 10px;
    padding: 24px;
    border-radius: 20px;
    gap: 20px;
    border: 4px solid #D01C1C;
    transition: 0.5s ease-in;
}

/*Web Designs*/
.web-section{
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto;
    column-gap: 30px;
    row-gap: 30px;
    width: auto;
    margin: auto;
    margin-top: 10px;
    padding: 10px;
    justify-content: center;
}

/* text appears */
.image-text-appear {
    position: relative;
    height: auto;
    width: auto;
    cursor: pointer;

  }
  
  .description {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(154, 29, 29, 0.72);
    color: #fff;
    visibility: hidden;
    opacity: 0;
    align-items: center;
    margin: auto;

  
    /* transition effect. not necessary */
    transition: opacity .2s, visibility .2s;
  }
  
  .image-text-appear:hover .description {
    visibility: visible;
    opacity: 1;
  }

  /*swot*/
  .swot{
    display: grid;
    grid-template-columns: auto;
    width: auto;
    padding: 44px;
    border-radius: 20px;
    gap: 20px;
}

.swot-section{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    column-gap: 30px;
    row-gap: 30px;
    width: auto;
}






@media screen and (max-width:1200px) {

    .section-grid{
        display: grid;
        grid-template-columns: auto;
        column-gap: 100px;
        row-gap: 50px;
        align-items: center;
        width: auto;
        margin: auto;
        margin-top: 10px;
        padding: 10px;
        justify-content: center;
    }
    
    .hero_banner{
        display: grid;
        grid-template-columns: auto auto;
        column-gap: 100px;
        align-items: center;
        width: auto;
        margin: auto;
        margin-top: 10px;
        padding: 10px;
        justify-content: center;
    } 
    
}





@media screen and (max-width:1000px) {
   
    .hero_banner{
        display: grid;
        grid-template-columns: auto;
        column-gap: 100px;
        align-items: center;
        width: auto;
        margin: auto;
        margin-top: 10px;
        padding: 10px;
        justify-content: center;
    }
    
    .name-profession-button{
        display: grid;
        grid-row: inherit;
        align-items: center;
        gap: 16px;
    }
    
    /*Project Section*/
    .project-number-title-text-link{
        display: grid;
        grid-template-rows: auto;
        row-gap: 20px;
        align-items: center;
        width: 600px;
        height: auto;
        padding: 10px;
        margin: 10px;
    }

    /*Services*/
.card-section{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    column-gap: 30px;
    row-gap: 30px;
    width: auto;
    margin: auto;
    margin-top: 10px;
    padding: 10px;
    justify-content: center;
}

.service-card{
    display: grid;
    grid-template-rows: auto;
    border: 4px solid #D01C1C;
    width: auto;
    margin: 10px;
    padding: 24px;
    border-radius: 20px;
    gap: 20px;
}
.service-card:hover{
    display: grid;
    grid-template-rows: auto;
    background-color: #FEE1DB;
    width: auto;
    margin: 10px;
    padding: 24px;
    border-radius: 20px;
    gap: 20px;
    border: 4px solid #D01C1C;
    transition: 0.5s ease-in;
}

/*swot*/
.swot{
    display: grid;
    grid-template-columns: auto;
    width: auto;
    padding: 24px;
    border-radius: 20px;
    gap: 20px;
}

.swot-section{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    column-gap: 30px;
    row-gap: 30px;
    width: auto;
}



}

    



@media only screen and (max-width: 600px) and (min-width: 100px)  {

    .hero_banner{
        display: grid;
        grid-template-columns: auto;
        column-gap: 100px;
        align-items: center;
        width: auto;
        height: auto;
        margin: auto;
        margin-top: 10px;
        padding: 10px;
        justify-content: center;
    }



/*Project Section*/
.project-number-title-text-link{
    display: grid;
    grid-template-rows: auto;
    row-gap: 10px;
    align-items: center;
    width: auto;
    padding: 10px;
    margin: 10px;
}

/*Services*/
.card-section{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    column-gap: 30px;
    row-gap: 30px;
    width: auto;
    margin: auto;
    margin-top: 10px;
    padding: 10px;
    justify-content: center;
}

.service-card{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    border: 4px solid #D01C1C;
    width: auto;
    margin: auto;
    padding: 10px;
    border-radius: 20px;
    gap: 20px;
}
.service-card:hover{
    display: grid;
    grid-template-rows: auto;
    background-color: #FEE1DB;
    display: grid;
    grid-template-columns: auto;
    border: 4px solid #D01C1C;
    width: auto;
    margin: auto;
    padding: 10px;
    border-radius: 20px;
    gap: 20px;
    transition: 0.5s ease-in;
}


}