img.card-img-top.home-img-cover-ourservice {
                            height: 155px !important;
                        }
                        
                        .short_description {
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 4;
                            -webkit-box-orient: vertical;
                        }
                        
                        .header_face_line {
                            font-size: 1.7rem;
                            font-style: italic;
                            color: #222222;
                            font-weight: bold;
                        }
                        
                        a:hover,
                        a:visited,
                        a:link,
                        a:active {
                            text-decoration: none;
                        }
                        
                        a.non-a:hover,
                        a.non-a:visited,
                        a.non-a:link,
                        a.non-a:active {
                            text-decoration: none;
                            color: #222222;
                        }
                        
                        .banner-content {
                            margin-top: auto;
                            margin-bottom: auto;
                            padding-bottom: 1rem;
                        }
                        
                        section#gallery {
                            background: url(../img/vecteezy_background-black-and-gold-background_vg0321-ai.png) center;
                            background-size: cover;
                            /*background: #222222;*/
                            background-repeat: no-repeat;
                        }
                        
                        .footer-area {
                            color: #fff;
                            padding-top: 220px;
                            /* background: url(../img/footer-bg.jpg) center; */
                            background: #b68734;
                            background-size: cover;
                        }
                        
                        h2.tel-header {
                            font-size: 3.2rem;
                            margin-bottom: 1rem;
                        }
                        
                        .section-gap {
                            padding: 100px 0;
                        }
                        
                        .hero {
                            display: flex;
                            max-width: 1440px;
                            gap: 2em;
                            justify-content: space-between;
                            margin: 5em 2em;
                        }
                        
                        .text {
                            width: 40%;
                            height: 500px;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                        }
                        
                        .text__short {
                            text-transform: uppercase;
                            font-size: 1.2rem;
                            color: #b68734;
                        }
                        
                        .text__title {
                            line-height: 1.1;
                            margin: 0;
                            margin-bottom: 10px;
                        }
                        
                        .text__description {
                            line-height: 1.2;
                            font-size: 1.4em;
                            font-weight: 100;
                            color: #495057;
                            font-style: italic;
                        }
                        
                        .text__button {
                            max-width: auto;
                            text-align: center;
                            display: inline-block;
                            text-decoration: none;
                            color: white;
                            background-color: #b68734;
                            padding: 1em 2em;
                            border-radius: 0.5em;
                        }
                        
                        .grid__container {
                            min-width: 55%;
                            display: grid;
                            grid-gap: .5em;
                            grid-template-columns: repeat(8, 1fr);
                        }
                        
                        .grid__item {
                            background-color: grey;
                            border-radius: 0.5em;
                        }
                        
                        .one {
                            grid-column: 1 / 2;
                            grid-row: 2 / 3;
                            background-image: url('../img/row1/4741818385808770834.8f44d8de12db371f13649b8b8669b4ec.22052506.JPG');
                            background-position: center;
                            background-size: cover;
                        }
                        
                        .two {
                            grid-column: 2 / 5;
                            grid-row: 1 / 4;
                            background-image: url('../img/row1/4741818385808770834.3683d517a0694f949a99570f0d2483f0.22052506.JPG');
                            background-position: center;
                            background-size: cover;
                        }
                        
                        .three {
                            grid-column: 5 / 6;
                            grid-row: 1 / 2;
                            background-image: url('../img/row1/4741818385808770834.647c55d29eae43bffc18f2cc41e1755e.22052506.JPG');
                            background-position: center;
                            background-size: cover;
                        }
                        
                        .four {
                            grid-column: 6 / 7;
                            grid-row: 1 / 2;
                            background-color: #ffa200b5;
                            border-radius: 0 0 100px 0;
                            -moz-border-radius: 0 0 100px 0;
                            -webkit-border-radius: 0 0 100px 0;
                        }
                        
                        .five {
                            grid-column: 5 / 7;
                            grid-row: 2 / 4;
                            background-image: url('../img/row1/4741818385808770834.e9334d21d30d2f2c06b707e3b88dd457.22052506.JPG');
                            background-position: center;
                            background-size: cover;
                        }
                        
                        .six {
                            grid-column: 7 / 8;
                            grid-row: 2 / 3;
                            background-color: #003566d9;
                            border-radius: 0 100px 0 0;
                            -moz-border-radius: 0 100px 0 0;
                            -webkit-border-radius: 0 100px 0 0;
                        }
                       
                        .seven {
                            grid-column: 7 / 8;
                            grid-row: 3 / 4;
                            background-image: url('../img/row1/4741818385808770834.1703cbef29be2306f4c023e8a7b15eb7.22052506.JPG');
                            background-position: center;
                            background-size: cover;
                        }
                        
                        .eight {
                            grid-column: 8 / 9;
                            grid-row: 3 / 4;
                            border-radius: 50%;
                            background-color: #ffd60aa1;
                        }
                        
                        .nine {
                            grid-column: 1 / 2;
                            grid-row: 4 / 5;
                            background-color: #001d3dc4;
                            border-radius: 100px 0 0 0;
                            -moz-border-radius: 100px 0 0 0;
                            -webkit-border-radius: 100px 0 0 0;
                        }
                        
                        .ten {
                            grid-column: 2 / 3;
                            grid-row: 4 / 5;
                            background-image: url('../img/row1/4741818385808770834.ec34efb4a6d39a63215d7f9e60a773c3.22052506.JPG');
                            background-position: center;
                            background-size: cover;
                        }
                        
                        .eleven {
                            grid-column: 3 / 5;
                            grid-row: 4 / 6;
                            background-image: url('../img/row1/4741818385808770834.1e466edbbb06efa9b1c5d6ab07a2e669.22052506.JPG');
                            background-position: center;
                            background-size: cover;
                        }
                        
                        .twelve {
                            grid-column: 5 / 6;
                            grid-row: 4 / 5;
                            background-image: url('../img/row1/4741818385808770834.5d60f77c52e5329f1cc91cb595a0e2d2.22052506.JPG');
                            background-position: center;
                            background-size: cover;
                        }
                        
                        @media (max-width: 900px) {
                            .grid__container {
                                min-width: 50%;
                                height: 400px;
                                margin-top: 50px;
                            }
                            @media (max-width: 780px) {
                                .hero {
                                    flex-direction: column-reverse;
                                    margin: 2em 2em;
                                }
                                .text {
                                    width: 100%;
                                }
                            }
.portfolio-menu{
    text-align:center;
}
.portfolio-menu ul li{
    display:inline-block;
    margin:0;
    list-style:none;
    padding:10px 15px;
    cursor:pointer;
    -webkit-transition:all 05s ease;
    -moz-transition:all 05s ease;
    -ms-transition:all 05s ease;
    -o-transition:all 05s ease;
    transition:all .5s ease;
}

.portfolio-item{
    /*width:100%;*/
}
.portfolio-item .item{
    /*width:303px;*/
    float:left;
    margin-bottom:10px;
}
html{scroll-behavior:smooth
transition: all 0.5s;}
/* https://every-layout.dev/layouts/sidebar/ - The following is based nearly entirely from this */



.with-sidebar {
  --gap: 0; /* or whatever */
  --not-sidebar-min-width: 40%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

/* need to apply the .sidebar-right class to the element aswell if your sidebar isn't on the left */
.with-sidebar > :first-child,
.with-sidebar.sidebar-right > :last-child {
  flex-grow: 1;
  flex-basis: var(--sidebar-width); /* This variable is left unset to provide the default behavior of a sidebar that is only the width of it's content, overwrite this by setting --sidebar-width to set an ideal width like I've done below  */
}

.with-sidebar > :last-child,
.with-sidebar.sidebar-right > :first-child{
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--not-sidebar-min-width);
}


/* Modifications to the reusable base class */

.main-wrapper {
  --sidebar-width: 400px;
  --gap: 50px;
  padding: 50px;
  align-items: flex-start; /* prevents the items from becoming equal heights, which is usually what you want, but not here. Could convert this into a modifier class */
}

.card {
  --sidebar-width: 400px;
}

/* poorly organised copy and pasted crap not relevant to the core demo */

.box {
  padding: 2.44141rem;
  color: var(--color-dark);
  background-color: var(--color-light); }



.card {
  
  --width: 400px;
  min-height: 380px;
  box-shadow: 0 2px 1.6px rgba(0, 0, 0, 0.007), 0 4.5px 3.6px rgba(0, 0, 0, 0.01), 0 7.9px 6.3px rgba(0, 0, 0, 0.013), 0 12.5px 10px rgba(0, 0, 0, 0.015), 0 19.3px 15.5px rgba(0, 0, 0, 0.017), 0 30.1px 24.1px rgba(0, 0, 0, 0.02), 0 50px 40px rgba(0, 0, 0, 0.023), 0 100px 80px rgba(0, 0, 0, 0.03);
  border-radius: 10px;
  overflow: hidden; }
  .card date, .card .cat {
    font-weight: bold;
    color: #d68a2e;
    font-size: 1rem; }
  .card .box {
    --color-light: #fff;
    --color-dark:#d68a2e; }

.stack {
  display: flex;
  flex-direction: column;
}

.stack[data-stack-split="3"] > :nth-child(3){
margin-bottom: auto;
}

.stack > * {margin-top: 0; margin-bottom: 0;}
.stack > * + * {
  margin-top: 1rem;
}

.date {
  display: block;
}

.card .stack {
  margin-top: 0;
}

 img.our_work {
  display: block;
  max-width: 100%;
  min-height: 100%;
  object-fit: cover; }
.box.stack {
    padding: 1.5rem;
}