*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.body{
    width: 100%;
    height: 100%;
    
}
#header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: whitesmoke;
    margin: 0 120px;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 9;
    border: 0.2px solid black;
    
 
}
#header img{
    max-width: 200px;
}
#navbar{
    display: flex;
    justify-content: center;
    align-items: center;
    
}


#navbar li{
    list-style: none;
    margin-left: 50px;
  
}
#navbar li a{
    text-decoration: none;
    font-size: 20px;
    color: white;
    background: black;
    padding: 15px 20px;
    border-radius:15px;
}
#navbar a:hover,
#navbar a.active {
    background-color: red;
}
#mobile{
    display: none;
    align-items: center;
}
#close{
    display: none;
    color: red;
}
    

#main-home{
    display: flex;
    margin: 0 120px;
    border: 0.2px solid black;
    
    
}
#servbar{
    display: flex;
    flex-direction: column;
    background: black;
    width: 17%;
    padding: 50px 0;
    position: sticky;
    top: 40px;
    left: 0;
    z-index: 8;
    height: 100vh;
    border: 0.2px solid black;
    
}
#servbar h3{
    font-size: 24px;
    color: red;
    text-align: center;
    margin-bottom: 18px;
}
#sidebar{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
#sidebar li{
    list-style: none;
    margin-bottom: 40px;
    width: 100%;
    padding: 10px;
    border-radius: 5px;
}
#sidebar li a{
    text-decoration: none;
    font-size: 22px;
    color: white;
    
}
#sidebar li:hover,
#sidebar li.active {
    background-color: red;
}
#menubar{
    display: none;
    align-items: center;
}
#closeBtn{
    display: none;
    color: red;
}
#main{
   width: 90%;
 
}
#mains{
    display: flex;
    flex-wrap: wrap;
    height: 480px;
    border: 0.2px solid black;
    
    
    
}
#mains1{
    width: 65%;
    background-image: url("./images/gmlbanner-01.jpg");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
   
}

#mains2{
    width: 35%;
    padding: 10px;
    
    
 
}
#mains2 h4{
    font-size: 18px;
    color: red;
    text-align: center;
    margin-bottom: 15px;
}
#mains2 h6{
    font-size: 16px;
    color: red;
    margin-top: 15px;
}
#mains2 span{
    font-size: 16px;
    color: black;
    margin-bottom: 15px;
}
#mains2 span i{
    font-size: 18px;
    color: black;
    padding: 15px 5px;
}
#mainsign{
    display: flex;
    flex-wrap: wrap;
    border: 0.2px solid black;
    
}
#mainsign1, #mainsign2, #mainsign3, #mainsign4,
#mainsign5, #mainsign6{
    width: 33.3%;
    height: 350px;
    border: 0.2px solid black;
}
#mainsign1{
    background-image: url("./images/designing.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
    
 
}

#mainsign2{
    background-image: url("./images/large-format.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
    
}
#mainsign3{
    background-image: url("./images/branding.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
} 
#mainsign4 {
    background-image: url("./images/fabric.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#mainsign5 {
    background-image: url("./images/pylon.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#mainsign6 {
    background-image: url("./images/3d.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#main-about{
    display: flex;
    margin: 0 120px;
    
}
#main-about{
    border: 2px outset grey / darkgray; 
    padding: 1px 
    
}
#about{
    width: 90%;
 
}
#abouts{
    display: flex;
    flex-wrap: wrap;
    height: 1061px;
    
}
#abouts1{
    width: 100%;
    height: 500px;
    background-image: url("./images/gmlbanner-01.jpg");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 0 200px;
    
}

#abouts2{
    width: 100%;
    height: 560px;
    margin: 0 200px;
 
}
#abouts2 h3{
    font-size: 24px;
    color: red;
    text-align: center;
    margin-bottom: 10px;
}
#abouts2 h4{
    font-size: 22px;
    color: red;
    text-align: center;
    margin-top: 10px;
}
#abouts2 h5{
    font-size: 20px;
    color: red;
    text-align: center;
    margin-top: 10px;
}
#abouts2 span{
    font-size: 18px;
    color: black;
    margin-bottom: 10px;
    margin: 0 40px;
}
#about2 span i{
    font-size: 34px;
    color: black;
    margin-top: 55px;
    
}


#main-services{
    display: flex;
    margin: 0 120px;
    border: 0.2px solid black;
    
    
}
#service{
    width: 90%;
 
}
#servicesign{
    display: flex;
    flex-wrap: wrap;
    
}
#servicesign1, #servicesign2, #servicesign3, #servicesign4,
#servicesign5, #servicesign6, #servicesign7, #servicesign8, #servicesign9{
    width: 33.3%;
    height: 350px;
    border: 0.2px solid black;
    
}
#servicesign1{
    background-image: url("./images/designing.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

#servicesign2{
    background-image: url("./images/large-format.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}
#servicesign3{
    background-image: url("./images/branding.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
} 
#servicesign4 {
    background-image: url("./images/fabric.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}
#servicesign5 {
    background-image: url("./images/pylon.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}
#servicesign6 {
    background-image: url("./images/3d.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#servicesign7 {
    background-image: url("./images/kacyiru.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#servicesign8 {
    background-image: url("./images/kinamba1.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#servicesign9 {
    background-image: url("./images/cristal-lounge.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#main-clients{
    display: flex;
    margin: 0 120px;
    border: 0.2px solid black;
    
    
}
#client{
    width: 90%;
 
}
#clients h3{
    text-align: center;
    color: red;
    font-size: 30px;
    margin: 20px 0;
}
#clientsign{
    display: flex;
    flex-wrap: wrap;
    
}
#clientsign1, #clientsign2, #clientsign3, #clientsign4,
#clientsign5, #clientsign6, #clientsign7, #clientsign8, #clientsign9, #clientsign10, #clientsign11, #clientsign12, #clientsign13, #clientsign14{
    width: 33.3%;
    height: 350px;
    border: 0.2px solid black;
}
#clientsign1{
    background-image: url("./partners/part1.jpg");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

#clientsign2{
    background-image:  url("./partners/part2.jpg");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#clientsign3{
    background-image:  url("./partners/part3.jpg");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
} 
#clientsign4 {
    background-image:  url("./partners/part4.jpg");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#clientsign5 {
    background-image:  url("./partners/part5.jpg");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#clientsign6 {
    background-image:  url("./partners/part6.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#clientsign7{
    background-image:  url("./partners/part7.jpg");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#clientsign8{
    background-image:  url("./partners/part8.jpg");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#clientsign9{
    background-image:  url("./partners/part9.jpg");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#clientsign10{
    background-image:  url("./partners/part10.jpg");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#clientsign11{
    background-image:  url("./partners/part11.jpg");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}
#clientsign12{
    background-image:  url("./partners/part12.jpg");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#clientsign13{
    background-image:  url("./partners/part13.jpg");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#clientsign14{
    background-image:  url("./partners/part14.jpg");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#main-designs{
    display: flex;
    margin: 0 120px;
    border: 0.2px solid black;
    
    
}
#design{
    width: 90%;
 
}
#designsign{
    display: flex;
    flex-wrap: wrap;
    
}
#designsign1, #designsign2, #designsign3, #designsign4,
#designsign5, #designsign6, #designsign7, #designsign8, #designsign9{
    width: 33.3%;
    height: 350px;
    border: 0.2px solid black;
    
}
#designsign1{
    background-image: url("./images/designing.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
  
}

#designsign2{
    background-image: url("./images/branding.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
} 

#designsign3 {
    background-image: url("./images/pylon.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#designsign4 {
    background-image: url("./images/3d.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#designsign5 {
    background-image: url("./images/kacyiru.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#designsign6 {
    background-image: url("./images/cristal-lounge.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#main-printing{
    display: flex;
    margin: 0 120px;
    border: 0.2px solid black;
    
    
}
#print{
    width: 90%;
 
}
#printsign{
    display: flex;
    flex-wrap: wrap;
    
}
#printsign1, #printsign2, #printsign3, #printsign4,
#printsign5, #printsign6, #printsign7, #printsign8, #printsign9{
    width: 33.3%;
    height: 350px;
    border: 0.2px solid black;
    
}

#printsign1 {
    background-image: url("./images/large-format.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#printsign2{
    background-image: url("./images/branding.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
} 

#printsign3 {
    background-image: url("./images/pylon.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#printsign4 {
    background-image: url("./images/kacyiru.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#printsign5{
    background-image: url("./images/kinamba1.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}

#printsign6 {
    background-image: url("./images/cristal-lounge.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#main-branding{
    display: flex;
    margin: 0 120px;
    border: 0.2px solid black;
    
    
}
#brand{
    width: 90%;
 
}
#brandsign{
    display: flex;
    flex-wrap: wrap;
    
}
#brandsign1, #brandsign2, #brandsign3, #brandsign4,
#brandsign5, #brandsign6{
    width: 33.3%;
    height: 350px;
    border: 0.2px solid black;
    
}
#brandsign1{
    background-image: url("./images/branding.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
} 
#brandsign2 {
    background-image: url("./images/fabric.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#brandsign3 {
    background-image: url("./images/pylon.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}

#brandsign4 {
    background-image: url("./images/kacyiru.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#brandsign5 {
    background-image: url("./images/kinamba1.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#brandsign6 {
    background-image: url("./images/cristal-lounge.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}

#main-fabricates{
    display: flex;
    margin: 0 120px;
    border: 0.2px solid black;
    
    
}
#fabricate{
    width: 90%;
 
}
#fabricatesign{
    display: flex;
    flex-wrap: wrap;
    
}
#fabricatesign1, #fabricatesign2, #fabricatesign3, #fabricatesign4,
#fabricatesign5, #fabricatesign6{
    width: 33.3%;
    height: 350px;
    border: 0.2px solid black;
    
}
#fabricatesign1 {
    background-image: url("./images/fabric.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#fabricatesign2{
    background-image: url("./images/branding.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
} 

#fabricatesign3 {
    background-image: url("./images/pylon.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#fabricatesign4 {
    background-image: url("./images/3d.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#fabricatesign5 {
    background-image: url("./images/kacyiru.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}

#fabricatesign6 {
    background-image: url("./images/cristal-lounge.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#main-advertising{
    display: flex;
    margin: 0 120px;
    border: 0.2px solid black;
    
}
#advert{
    width: 90%;
 
}
#advertsign{
    display: flex;
    flex-wrap: wrap;
    
}
#advertsign1, #advertsign2, #advertsign3, #advertsign4,
#advertsign5, #advertsign6{
    width: 33.3%;
    height: 350px;
    border: 0.2px solid black;
    
}
#advertsign1 {
    background-image: url("./images/kacyiru.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}

#advertsign2{
    background-image: url("./images/large-format.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
    
}
#advertsign3{
    background-image: url("./images/branding.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
} 

#advertsign4 {
    background-image: url("./images/pylon.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#advertsign5 {
    background-image: url("./images/kinamba1.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#advertsign6 {
    background-image: url("./images/cristal-lounge.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#main-pylons{
    display: flex;
    margin: 0 120px;
    border: 0.2px solid black;
    
}
#pylon{
    width: 90%;
 
}
#pylonsign{
    display: flex;
    flex-wrap: wrap;
    
}
#pylonsign1, #pylonsign2, #pylonsign3, #pylonsign4,
#pylonsign5, #pylonsign6{
    width: 33.3%;
    height: 350px;
    border: 0.2px solid black;
    
}
#pylonsign1 {
    background-image: url("./images/pylon.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#pylonsign2 {
    background-image: url("./images/kacyiru.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#pylonsign3 {
    background-image: url("./images/fabric.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}

#pylonsign4{
    background-image: url("./images/branding.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
} 



#pylonsign5 {
    background-image: url("./images/kinamba1.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#pylonsign6 {
    background-image: url("./images/cristal-lounge.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#main-letter3Ds{
    display: flex;
    margin: 0 120px;
    border: 0.2px solid black;
    
}
#letter3D{
    width: 90%;
 
}
#letter3Dsign{
    display: flex;
    flex-wrap: wrap;
    
}
#letter3Dsign1, #letter3Dsign2, #letter3Dsign3, #letter3Dsign4,
#letter3Dsign5, #letter3Dsign6{
    width: 33.3%;
    height: 350px;
    border: 0.2px solid black;
    
}
#letter3Dsign1 {
    background-image: url("./images/cristal-lounge.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#letter3Dsign2 {
    background-image: url("./images/3d.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#letter3Dsign3 {
    background-image: url("./images/pylon.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
#letter3Dsign4{
    background-image: url("./images/designing.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;

}

#letter3Dsign5{
    background-image: url("./images/branding.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
} 
#letter3Dsign6 {
    background-image: url("./images/fabric.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}

#footer{
    display: flex;
    justify-content: space-between;
    bottom: 0px;
    left: 0;
    z-index: 9;
    height: 120px;
    margin: 0 120px;
    border: 0.2px solid black;
    
}


#footer img{
    padding: 5px 20px;
}
#footer h5{
    font-size: 18px;
    color: red;
    padding: 0 20px;
}
#footer h6{
    font-size: 16px;
    padding: 0 20px;
}

@media(max-width: 1200px){
    
#header{
    margin: 0 40px;
}
#header img{
    max-width: 150px;
}
#navbar li{
    margin: 0 20px;
  
}
#navbar li a{
    font-size: 16px;
    padding: 10px 15px;
    
}

#main-home{
    margin: 0 40px;
}
#servbar{
    width: 15%;
    padding: 50px 0;
    top: 80px;
    height: 100vh;
    
}
#sidebar li{
    margin-bottom: 16px;
    padding: 5px;
}
#sidebar li a{
    font-size: 18px;
    
}
#main{
    width: 90%;
 
}
#mains{
    height: 361px;
   
}

#mains2{
    padding: 10px;

}
#mainsign1, #mainsign2, #mainsign3, #mainsign4,
#mainsign5, #mainsign6{
    width: 33.3%;
    height: 230px;
    
}

#main-about{
    margin: 0 40px;
    
}
#abouts1{
    margin: 0 100px;
}

#abouts2{
    margin: 0 100px;
 
}

#abouts2 h3{
    font-size: 24px;
    color: red;
    text-align: center;
    margin-bottom: 10px;
}
#abouts2 h4{
    font-size: 22px;
    color: red;
    text-align: center;
    margin-top: 10px;
}
#abouts2 h5{
    font-size: 20px;
    color: red;
    text-align: center;
    margin-top: 10px;
}
#abouts2 span{
    font-size: 18px;
    color: black;
    margin-bottom: 10px;
    margin: 0 40px;
}
#about2 span i{
    font-size: 34px;
    color: black;
    margin-top: 55px;
    
}

#main-services{
    display: flex;
    margin: 0 40px;
    
    
}
#service{
    width: 90%;
 
}

#servicesign{
    display: flex;
    flex-wrap: wrap;
    
}
#servicesign1, #servicesign2, #servicesign3, #servicesign4,
#servicesign5, #servicesign6, #servicesign7, #servicesign8, #servicesign9{
    width: 33.3%;
    height: 230px;
    
}

#main-clients{
    display: flex;
    margin: 0 40px;
    border: 0.2px solid black;
    
    
}
#client{
    width: 90%;
 
}
#clients h3{
    text-align: center;
    color: red;
    font-size: 30px;
    margin: 20px 0;
}
#clientsign{
    display: flex;
    border: 0.2px solid black;
}
#clientsign1, #clientsign2, #clientsign3, #clientsign4,
#clientsign5, #clientsign6, #clientsign7, #clientsign8, #clientsign9, #clientsign10, #clientsign11, #clientsign12, #clientsign13, #clientsign14{
    width: 33.3%;
    height: 230px;
}

#main-designs{
    margin: 0 40px;
    
}
#design{
    width: 90%;
 
}
#designsign1, #designsign2, #designsign3, #designsign4,
#designsign5, #designsign6, #designsign7, #designsign8, #designsign9{
    width: 33.3%;
    height: 350px;
   
}

#main-printing{
   margin: 0 40px;
    
    
    
}
#print{
    width: 90%;
 
}

#printsign1, #printsign2, #printsign3, #printsign4,
#printsign5, #printsign6, #printsign7, #printsign8, #printsign9{
    width: 33.3%;
    height: 350px;
    
}


#brand{
    width: 90%;
 
}

#brandsign1, #brandsign2, #brandsign3, #brandsign4,
#brandsign5, #brandsign6{
    width: 33.3%;
    height: 350px;
   
    
}

#main-fabricates{
    margin: 0 40px;
    
    
    
}
#fabricate{
    width: 90%;
 
}

#fabricatesign1, #fabricatesign2, #fabricatesign3, #fabricatesign4,
#fabricatesign5, #fabricatesign6{
    width: 33.3%;
    height: 350px;
    
    
}


#main-advertising{
    margin: 0 40px;
    
    
}
#advert{
    width: 90%;
 
}

#advertsign1, #advertsign2, #advertsign3, #advertsign4,
#advertsign5, #advertsign6{
    width: 33.3%;
    height: 350px;
    
    
}
 


#main-pylons{
    margin: 0 40px;
    
    
}
#pylon{
    width: 90%;
 
}

#pylonsign1, #pylonsign2, #pylonsign3, #pylonsign4,
#pylonsign5, #pylonsign6{
    width: 33.3%;
    height: 350px;
    
    
}

#main-letter3Ds{
    margin: 0 40px;
    
    
}
#letter3D{
    width: 90%;
    
}
#letter3Dsign1, #letter3Dsign2, #letter3Dsign3, #letter3Dsign4,
#letter3Dsign5, #letter3Dsign6{
    width: 33.3%;
    height: 350px;
    border: 0.2px solid black;
    
}

#footer{
    display: flex;
    justify-content: space-between;
    bottom: 0px;
    left: 0;
    z-index: 9;
    height: 100px;
    margin: 0 40px;
    border: 0.2px solid black;
    
}
#footer img{
    padding: 5px 20px;
}
#footer h5{
    font-size: 18px;
    color: red;
    padding: 0 20px;
}
#footer h6{
    font-size: 16px;
    padding: 0 20px;
}
}

@media(max-width: 845px){
#header{
    margin: 0 20px;
}
#header img{
    max-width: 120px;
}
#navbar {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: fixed;
    top: 0;
    right:-200px;
    height: 100vh;
    width: 200px;
    padding: 80px 0 0 20px;
    background: whitesmoke;
    transition: 0.3s;
}
#navbar.active{
    right: 0px;
}
#navbar li{
    margin: 20px 0;
}
#mobile{
    display: flex;
    align-items: center;
}
#mobile i{
    font-size: 24px;
    padding: 10px;
    color: red;
}
#close{
    display: flex;
    position: absolute;
    text-decoration: none;
    top: 30px;
    left: 30px;
    color: red;
    font-size: 24px;
    
    
}



#servbar{
    width: 100%;
    top: 40px;
    left: 20px;
    height: 50px;
    padding: 0;
    
    
}
#servbar h3{
    padding: 10px 0;
}
#sidebar {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: fixed;
    top: 60px;
    left: -220px;
    height: 100vh;
    width: 200px;
    z-index: 99;
    padding: 60px 0 0 20px;
    background: black;
    transition: 0.3s;
}
#sidebar.active{
    left: 20px;
}
#sidebar li{
    margin: 16px 0;
}

#menubar{
    display: flex;
}
#menubar i{
    display: flex;
    position: absolute;
    text-decoration: none;
    top: 0px;
    left: 0px;
    font-size: 24px;
    padding: 10px;
    color: red;
}
#closeBtn{
    display: flex;
    position: absolute;
    text-decoration: none;
    top: 30px;
    left: 30px;
    color: red;
    font-size: 24px;
    
    
}
#main-home{
    display: flex;
    flex-direction: column;
    margin: 0 20px;
    
    
}

#main{
    width: 100%;
 
}
#mains{
    height: 340px;

}
#mains2 h4{
    font-size: 14px;
    margin-bottom: 8px;
}
#mains2 h6{
    font-size: 12px;
    margin-top: 8px;
}
#mains2 span{
    font-size: 12px;
    margin-bottom: 5px;
}
#mains2 span i{
    font-size: 12px;
    padding: 5px 5px;
}

#main-about{
    display: flex;
    flex-direction: column;
    margin: 0 20px;
    
    
}
#about {
    width: 100%;
}
#abouts1{
    width: 100%;
    margin: 0px;
    
}

#abouts2{
    width: 100%;
    margin: 0px;
 
}


#abouts{
    height: 1061px;
    margin: 0;

}
#main-services{
    display: flex;
    flex-direction: column;
    margin: 0 20px;
    
    
}
#service{
    width: 100%;
}
#servicesign{
    display: flex;
    flex-wrap: wrap;
    
}
#main-clients{
    display: flex;
    flex-direction: column;
    margin: 0 20px;
    
    
}
#client{
    width: 100%;
 
}
#footer{
    
    height: 100px;
    margin: 0 20px;
    
    
}




#main-designs{
    display: flex;
    flex-direction: column;
    margin: 0 20px;
    
    
    
}
#design{
    width: 100%;
 
}
#designsign{
    display: flex;
    flex-wrap: wrap;
    
}





#main-printing{
    display: flex;
    margin: 0 20px;
    flex-direction: column;
    
    
}
#print{
    width: 100%;
 
}



#main-branding{
    display: flex;
    margin: 0 20px;
    flex-direction: column;
    
    
}
#brand{
    width: 100%;
 
}

#main-fabricates{
    display: flex;
    margin: 0 20px;
    flex-direction: column;
    
    
}
#fabricate{
    width: 100%;
 
}

#main-advertising{
    display: flex;
    margin: 0 20px;
    flex-direction: column;
    
}
#advert{
    width: 100%;
 
}

#main-pylons{
    display: flex;
    margin: 0 20px;
    flex-direction: column;
    
}
#pylon{
    width: 100%;
 
}

#main-letter3Ds{
    display: flex;
    margin: 0 20px;
    flex-direction: column;
    
}
#letter3D{
    width: 100%;
 
}

}

@media(max-width: 479px){
#header{
    margin: 0;
}
#header img{
    max-width: 100px;
}
#sidebar.active{
    left: 0px;
}
#main-home{
    margin: 0;
}
#mains{
    display: flex;
    flex-direction: column;
    
}
#mains{
    height: 461px;
}
#mains1{
    
    width: 100%;
    height: 260px;
    
}
#mains2{
    width: 100%;
    height: 199px;
 
}
#mainsign{
    display: flex;
    flex-wrap: wrap;
   
}
#mainsign1, #mainsign2, #mainsign3, #mainsign4, #mainsign5, #mainsign6{
    width: 100%;
    height: 300px;
    
}
#main-about{
    
    margin: 0px;
}
#abouts1{
    width: 100%;
    margin: 0px;
    
}

#abouts2{
    width: 100%;
    margin: 0px;
 
}
#abouts{
    height: 920px;
}
#abouts1{
    
    width: 100%;
    height: 248px;
    
}
#abouts2{
    width: 100%;
    height: 670px;
    padding: 10px;
    
 
}
#abouts2 h3{
    font-size: 20px;
    margin-bottom: 8px;
}
#abouts2 h4{
    font-size: 18px;
    margin-top: 8px;
}
#abouts2 h5{
    font-size: 18px;
    margin-top: 8px;
}
#abouts2 span{
    font-size: 14px;
    margin-bottom: 8px;
    margin: 0 20px;
}
#about2 span i{
    font-size: 24px;
    color: black;
    margin-top: 35px;
    
}
#aboutsign{
    display: flex;
    flex-wrap: wrap;
   
}

#main-services{
    margin: 0;
    
    
}
#servicesign1, #servicesign2, #servicesign3, #servicesign4,
#servicesign5, #servicesign6, #servicesign7, #servicesign8, #servicesign9{
    
    width: 100%;
    height: 300px;
    
}
#main-clients{
    margin: 0;
}


#clientsign1, #clientsign2, #clientsign3, #clientsign4,
#clientsign5, #clientsign6, #clientsign7, #clientsign8, #clientsign9, #clientsign10, #clientsign11, #clientsign12, #clientsign13, #clientsign14{
    height: 300px;
    width: 100%;
    
}
#main-designs{
    margin: 0;
}

#designsign1, #designsign2, #designsign3, #designsign4,
#designsign5, #designsign6, #designsign7, #designsign8, #designsign9{
    width: 100%;
    height: 350px;
}

#main-printing{
    margin: 0;
    
}

#printsign1, #printsign2, #printsign3, #printsign4,
#printsign5, #printsign6, #printsign7, #printsign8, #printsign9{
    width: 100%;
    height: 350px;
    
}


#main-branding{
    margin: 0;
}

#brandsign1, #brandsign2, #brandsign3, #brandsign4,
#brandsign5, #brandsign6{
    width: 100%;
    height: 350px;
    
}
#main-fabricates{
    margin: 0;
}

#fabricatesign1, #fabricatesign2, #fabricatesign3, #fabricatesign4,
#fabricatesign5, #fabricatesign6{
    width: 100%;
    height: 350px;
    
}

#main-advertising{
    margin: 0;
}
#advertsign1, #advertsign2, #advertsign3, #advertsign4,
#advertsign5, #advertsign6{
    width: 100%;
    height: 350px;
}

#main-pylons{
    
    margin: 0;
}

#pylonsign1, #pylonsign2, #pylonsign3, #pylonsign4,
#pylonsign5, #pylonsign6{
    width: 100%;
    height: 350px;
}

#main-letter3Ds{
    margin: 0;
}

#letter3Dsign1, #letter3Dsign2, #letter3Dsign3, #letter3Dsign4,
#letter3Dsign5, #letter3Dsign6{
    width: 100%;
    height: 350px;
    
}

#footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 360px;
    margin: 0;
    
}
}