.navbar{
    padding: 20px 20px !important;
    position: fixed !important;
    width: 100%;
    z-index: 999;
    background-color: transparent !important;

}
.navbar-brand{
    font-family: 'Noto Sans', sans-serif;
    font-size: 20px;
    width: 300px;
}
/* .navbar-nav{
    margin-left: -82px !important;
} */
.nav-item a {
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px;
    color: #fff !important;
}

.navbar-nav li{
    margin-right: 20px;
}
.dropdown-menu li a{
    color: #005ba0 !important;
}
@media (min-width: 320px) and (max-width: 767px){
    .navbar-nav{
        background-color: #fff;
        padding: 20px 20px;
        margin-left: 60px;
    }
    .nav-item{
        padding-left: 50px;
    }
    .nav-item a{
        color: #005ba0 !important;
       
    }
    .navbar-toggler{
        margin-left: 260px;
        margin-top: -60px;
    }
    
}

/* first-banner start here */
.first-banner{
    width: 100%;
    height: 700px;
    position: absolute;
  
}
.bg-shape{
    position: absolute;
     right: 0;
}
.content{
    margin-top: 200px;
    position: absolute;
}
.content h3{
    margin-top: 50px;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 40px;
}
.simple{
    font-family: 'Noto Sans', sans-serif;
    font-weight: 400;
    font-size: 40px;
}
.content p{
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px;

}
.first{
    width: 540px;
    height: 500px;
    margin-top: -40px;
  
  }
 
.animation{
    position: relative;
    animation-name: example;
  animation-duration: 10s;
  animation-iteration-count: infinite;

}
@keyframes example {
    0%   { bottom:100px; top:0px;}
  
    50% { bottom:0px; top:80px;}
    
     100% { bottom:80px; top:0px;}
  }

  @media (min-width: 320px) and (max-width: 767px){
    .first-banner{
        width: 100%;
        height: auto;
    }
    .bg-shape{
      display: none;
    }
    .content{
       margin-top: 120px;
    }
    @keyframes example {
    0%   { bottom:100px; top:0px;}
  
    50% { bottom:0px; top:80px;}
    
     100% { bottom:80px; top:0px;}
  }
.animation{
    margin-top: 60px;
}


}
/* second-banner start here */

.second-banner{
    width: 100%;
    height: 800px;
    position: absolute;
    margin-top: 740px;
  
}
.second-banner a{
    text-decoration: none;
    color: black;
}
.second-banner .box{
    width: 350px;
    height: 600px;
    box-shadow: 0 3px 20px 0px rgb(0 0 0 / 12%);
    border-radius: 24px;
}
.box-img{
    width: 350px;
    height: 460px;
    background-color: aquamarine;
}
.info{
    padding: 20px;
}
.info h5{
    text-align: center;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 28px;
}

.box:hover{
transform: scale(1.1);
   transition: all 1.1s;
}
.sticky {
    box-shadow: rgb(0 0 0 / 10%) 0px 0px 20px !important;
    background-color: #fafafa !important;
    padding: 6px 6px !important;
  }
  .sticky .nav-item a{
      color: #005ba0 !important;
      
  }

  @media (min-width: 320px) and (max-width: 767px){
    .second-banner{
        width: 100%;
        height: auto;
        margin-top: 1000px;
    }
  }
  /* third-banner start here */
  .third-banner{
      width: 100%;
      height: 700px;
      position: absolute;
      margin-top: 1480px;
      background-color: #fafafa;
  }
  .third-box{
      padding: 40px;
  }
  .third-box h3{
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 40px;
    margin-top: 70px;
  }
  .third-info ul li{
      list-style: none;
  }
  .third-info ul{
      margin-left: -20px;
  }
  .material-icons{
      color: #005ba0 !important;
  }
  .tv-box{
      padding: 40px;
      margin-top: 40px;
  }
  
  .d-flex{
      display: flex;
  }
  .box-wrapper{
      width: 480px;
      height: 480px;
      border: 10px solid #005ba0;
      margin-top: 30p;
  }
 .third-banner .col-lg-6:not(:first-child){
     padding: 40px;
 }
 .third-img{
     margin-top: -38px;
 }
 @media (min-width: 320px) and (max-width: 767px){
    .third-banner{
        width: 100%;
        height: auto;
        margin-top: 2900px;
    }
    .box-wrapper{
        border: none;
        margin-left: -120px;
    }
  }
 /* footer start here */
 .footer{
     width: 100%;
     height: 350px; 
     position: absolute;
     background: linear-gradient(-47deg, #005BA0 0%, #199CFF 100%);
     margin-top: 2200px;
     padding: 60px;
 }
 .links ul li{
     list-style: none;
 }
 .links ul li a{
     color: #fff;
     font-family: 'Noto Sans', sans-serif;
     text-decoration: none;

 }
 .links h4{
    font-family: 'Noto Sans', sans-serif;
     color: #fff;
     font-weight: 400;
 }
 .office h4{
    font-family: 'Noto Sans', sans-serif;
    color: #fff;
 }
 .office p{
    font-family: 'Noto Sans', sans-serif;
     color: #fff;
 }

 .factory h4{
    font-family: 'Noto Sans', sans-serif;
    color: #fff;
 }
 .factory p{
    font-family: 'Noto Sans', sans-serif;
     color: #fff;
 }
 .contact h4{
    font-family: 'Noto Sans', sans-serif;
    color: #fff;
 }
 .call a{
     text-decoration: none;
     color: #fff;
 }
 .call a:hover{
     color: #fff;
 }
 .footer-icon{
     color: #fff !important;
 }
 .mail a{
    text-decoration: none;
    color: #fff;
}
.mail a:hover{
    color: #fff;
}
.web a{
    text-decoration: none;
    color: #fff;
}
.web a:hover{
    color: #fff;
}
.footer h5{
    font-family: 'Noto Sans', sans-serif;
    color: #fff;
    margin-top: 10px;
}
.developer a{
    color: #fff;
    text-decoration: none;
}
.developer a:hover{
    color: #fff;
    text-decoration: underline;
}


@media (min-width: 320px) and (max-width: 767px){
    .footer{
        width: 100%;
        height: auto;
        margin-top: 4500px;
    }
    .office{
        height: 160px !important;
    }
    h5{
        margin-top: 20px !important;
    }
  }



/* about-us page start from here */

.inner-nav{
    background-color: #fafafa !important;
    box-shadow: rgb(0 0 0 / 10%) 0px 0px 20px !important;
    padding: 8px !important;
    position: fixed !important;
    width: 100%;
}
.inner-nav .nav-item a {
    color: #005ba0 !important;
}
.about-first-banner{
    width: 100%;
    height: 600px;
    position: absolute;
    margin-top: 120px;
   
}
.about-first-banner h3{
    font-family: 'Noto Sans', sans-serif;
    color: #005ba0;
    font-size: 30px;
    text-align: center;
}
.about{
  margin-left: 20px;
    margin-top: 40px;
    width: 80%;
}
.about-first-banner .col-lg-7 h5{
    font-family: 'Noto Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
  
}
.about-second{
    width: 100%;
    height: 200px;
    position: absolute;
    margin-top: 520px ;
}
.about-us-footer{
    margin-top: 1060px;
}
.aim h3{
    font-family: 'Noto Sans', sans-serif;
    color: #005ba0;
    font-size: 30px;
    text-align: center;
}
.aim h5{
    font-family: 'Noto Sans', sans-serif;
    font-weight: 400;
    margin-top: 10px;
    font-size: 18px;
}

.vission h3{
    font-family: 'Noto Sans', sans-serif;
    color: #005ba0;
    font-size: 30px;
    text-align: center;
}
.vission h5{
    font-family: 'Noto Sans', sans-serif;
    font-weight: 400;
    margin-top: 10px;
    font-size: 18px;
}
.mission h3{
    font-family: 'Noto Sans', sans-serif;
    color: #005ba0;
    font-size: 30px;
    text-align: center;
}
.mission h5{
    font-family: 'Noto Sans', sans-serif;
    font-weight: 400;
    margin-top: 10px;
    font-size: 18px;
}
@media (min-width: 320px) and (max-width: 767px){
    .about-first-banner{
        width: 100%;
        height: auto;
        margin-top: 100px;
    }
    .about-first-banner h5{
        text-align: center;
    }
    .about-second{
        height: auto;
        margin-top: 920px;
    }
    .vission h5{
        text-align: center;
    }
    .mission h5{
        text-align: center;
    }
    .aim h5{
        text-align: center;
    }


    .about-us-footer{
        margin-top: 1830px;
    }
}
/* office-furniture page start here */

.office-first{
    width: 100%;
    height: 1900px;
    position: absolute;
    margin-top: 100px;
}
.office-wrapper{
    width: 330px;
    height: 350px;
    padding: 30px 0;
    box-shadow: 0 3px 20px 0px rgb(0 0 0 / 12%);

}
.office-img{
    width: 330px;
    height: 290px !important;
}
.office-first h3{
    font-family: 'Noto Sans', sans-serif;
    color: #005ba0;
    font-size: 30px;
    text-align: center;
    cursor: pointer;
}
.office-wrapper:hover{
    transform: scale(1.1);
   transition: all 1.2s ease-in-out;
}
.pagination{
    margin-top: 60px;
    margin-left: 940px;
}
.office-one-footer{
    margin-top: 1980px;
}
.office-one-footer h5{
    margin-top: 0;
}

@media (min-width: 320px) and (max-width: 767px){
    .office-first{
        width: 100%;
        height: auto;
        margin-top: 120px;
    }
    .office-one-footer{
        margin-top: 4740px;
    }
    .inner-nav{
        width: 100%;
    }
    .office{
        height: 160px !important;
    }
    .pagination{
        margin-top: 40px;
        margin-left: 180px;
    }
}
.office-second{
    width: 100%;
    height: 2230px;
    position: absolute;
    margin-top: 100px;
}
.office-second-footer{
    margin-top: 2310px;
}
.office-second h3{
    font-family: 'Noto Sans', sans-serif;
    color: #005ba0;
    font-size: 30px;
    text-align: center;
    cursor: pointer;
}
@media (min-width: 320px) and (max-width: 767px){
    .office-second{
        width: 100%;
        height: auto;
        margin-top: 120px;
    }
    .office-second-footer{
        margin-top: 5860px;
    }
    .inner-nav{
        width: 100%;
    }
    .office{
        height: 160px !important;
    }
    .pagination{
        margin-top: 40px;
        margin-left: 180px;
    }
}
/* Domestic furniture page start here */

.demo-one{
    width: 100%;
    height: 2230px;
    position: absolute;
    margin-top: 100px;
}
.demo-one-footer{
    margin-top: 2200px;
}
.demo-one h3{
    font-family: 'Noto Sans', sans-serif;
    color: #005ba0;
    font-size: 30px;
    text-align: center;
    cursor: pointer;
}
.demostic-wrapper{
    width: 510px;
    height: 530px;
    padding: 30px 0;
    box-shadow: 0 3px 20px 0px rgb(0 0 0 / 12%);

}
.demostic{
    width: 510px;
    height: 470px;
}
.demostic-wrapper:hover{
    transform: scale(1.1);
   transition: all 1.2s ease-in-out;
}
.demo-one-footer h5{
    margin-top: 10px;
}
@media (min-width: 320px) and (max-width: 767px){
    .demo-one{
        width: 100%;
        height: auto;
        margin-top: 120px;
    }
    .demo-one-footer{
        margin-top: 3800px;
    }
    .demostic{
    width: 350px !important;
    }
   .demo-one .pagination{
       margin-left: 100px;
   }

   .demostic-wrapper{
       width: 350px;
   }
  
 
}
.demo-two{
    width: 100%;
    height: 2230px;
    position: absolute;
    margin-top: 100px;
}
.demo-two-footer{
    margin-top: 2200px;
}
.demo-two h3{
    font-family: 'Noto Sans', sans-serif;
    color: #005ba0;
    font-size: 30px;
    text-align: center;
    cursor: pointer;
}
.demo-two-footer h5{
    margin-top: 10px;
}
@media (min-width: 320px) and (max-width: 767px){
    .demo-two{
        width: 100%;
        height: auto;
        margin-top: 120px;
    }
    .demo-two-footer{
        margin-top: 3790px;
    }
    .demostic{
    width: 350px !important;
    }
   .demo-two .pagination{
       margin-left: 100px;
   }
   .demostic-wrapper{
    width: 350px;
}
 
}

.demo-three{
    width: 100%;
    height: 2230px;
    position: absolute;
    margin-top: 100px;
}
.demo-three-footer{
    margin-top: 2200px;
}
.demo-three h3{
    font-family: 'Noto Sans', sans-serif;
    color: #005ba0;
    font-size: 30px;
    text-align: center;
    cursor: pointer;
}
.demo-three-footer h5{
    margin-top: 10px;
}

@media (min-width: 320px) and (max-width: 767px){
    .demo-three{
        width: 100%;
        height: auto;
        margin-top: 120px;
    }
    .demo-three-footer{
        margin-top: 5100px;
    }
    .demostic{
    width: 350px !important;
    }
   .demo-three .pagination{
       margin-left: 100px;
   }
   .demostic-wrapper{
    width: 350px;
}
 
}

.demo-four{
    width: 100%;
    height: 1230px;
    position: absolute;
    margin-top: 100px;
}
.demo-four-footer{
    margin-top: 990px;
}
.demo-four h3{
    font-family: 'Noto Sans', sans-serif;
    color: #005ba0;
    font-size: 30px;
    text-align: center;
    cursor: pointer;
}
.demo-four-footer h5{
    margin-top: 10px;
}
@media (min-width: 320px) and (max-width: 767px){
    .demo-four{
        width: 100%;
        height: auto;
        margin-top: 120px;
    }
    .demo-four-footer{
        margin-top: 1460px;
    }
    .demostic{
    width: 350px !important;
    }
   .demo-four .pagination{
       margin-left: 100px;
   }
   .demostic-wrapper{
    width: 350px;
}
 
}

/* moduler page start from here */



.moduler{
    width: 100%;
    height: 1000px;
    position: absolute;
    margin-top: 100px;
}
.moduler-wrapper{
    width: 510px;
    height: 530px;
    padding: 30px 0;
    box-shadow: 0 3px 20px 0px rgb(0 0 0 / 12%);
}
.moduler-width{
    width: 510px;
    height: 430px;
}
.moduler h3{
    font-family: 'Noto Sans', sans-serif;
    color: #005ba0;
    font-size: 30px;
    text-align: center;
    cursor: pointer;
}
.moduler-wrapper:hover{
    transform: scale(1.1);
   transition: all 1.2s ease-in-out;
}
.moduler-footer{
    margin-top: 1000px;
}
.moduler-footer h5{
    margin-top: 10px;
}
@media (min-width: 320px) and (max-width: 767px){
    .moduler{
        width: 100%;
        height: auto;
        margin-top: 120px;
    }
    .moduler-footer{
        margin-top: 1460px;
    }
    .moduler{
    width: 350px !important;
    }
   .moduler .pagination{
       margin-left: 100px;
   }
   .moduler-wrapper{
    width: 350px;
}
 
}


/* gallery page start from here */

.gallery-matter{
    width: 100%;
    height: 500px;
    margin-top: 120px;
    position: absolute;
}
.gallery-matter h3{
    font-family: 'Noto Sans', sans-serif;
    color: #005ba0;
    font-size: 24px;
    text-align: center;
}
.gallery-matter h5{
    font-family: 'Noto Sans', sans-serif;
    color: #005ba0;
    text-align: center;
}
.gallery-footer{
    margin-top: 570px;
}
.gallery-footer h5{
    margin-top: 10px;
}
@media (min-width: 320px) and (max-width: 767px){
    .gallery-matter{
        width: 100%;
        height: auto;
        margin-top: 120px;
    }
    .gallery-footer{
        margin-top: 480px;
    }

 
}
/* download page start from here */

.download-matter{
    width: 100%;
    height: 500px;
    margin-top: 180px;
    position: absolute;
}
.download-matter h3{
    font-family: 'Noto Sans', sans-serif;
    color: #005ba0;
    font-size: 24px;
    text-align: center;
}
.download-matter h5{
    font-family: 'Noto Sans', sans-serif;
    color: #005ba0;
    text-align: center;
}
.download-matter a{
    color: #fff;
    font-family: 'Noto Sans', sans-serif;
  text-decoration: none;
}
.download-matter a:hover{
    color: #fff;
}
.download-footer{
    margin-top: 580px;
}
.download-footer h5{
    margin-top: 10px;
}
.download-matter button{
margin-left: 500px;
} 

@media (min-width: 320px) and (max-width: 767px){
    .download-matter{
        width: 100%;
        height: auto;
        margin-top: 120px;
    }
    .download-footer{
        margin-top: 480px;
    }
    .download-matter button{
        margin-left: 100px;
        } 

 
}
/* career page start here */

.career-matter{
    width: 100%;
    height: 500px;
    margin-top: 180px;
    position: absolute;
}
.career-matter h3{
    font-family: 'Noto Sans', sans-serif;
    color: #005ba0;
    font-size: 24px;
    text-align: center;
}
.career-matter h5{
    font-family: 'Noto Sans', sans-serif;
    color: #005ba0;
    text-align: center;
}
.career-footer{
    margin-top: 580px;
}
.career-footer h5{
    margin-top: 10px;
}

@media (min-width: 320px) and (max-width: 767px){
    .career-matter{
        width: 100%;
        height: auto;
        margin-top: 120px;
    }
    .career-footer{
        margin-top: 480px;
    }

 
}

/* contact page start from here */

.contact-matter{
    width: 100%;
    height: 600px;
    margin-top: 180px;
    position: absolute;
}
.contact-matter h3{
    font-family: 'Noto Sans', sans-serif;
    color: #005ba0;
    font-size: 16px;
 margin-left: 180px;
}
.contact-matter h5{
    font-family: 'Noto Sans', sans-serif;
    color: #005ba0;
    text-align: center;
}
.contact-footer{
    margin-top: 700px;
}
.contact-footer h5{
    margin-top: 10px;
}
.contact-detail .call{
    margin-left: 180px;
}
.contact-detail .mail{
    margin-left: 140px;
}
.contact-detail .web{
    margin-left: 180px;
}
 .contact-detail .call a{
    text-decoration: none;
 color: #005ba0;
}
.contact-detail .call a:hover{
    color: #005ba0;
}
.contact-detail .footer-icon{
    color: #005ba0;
}
.contact-detail .mail a{
   text-decoration: none;
   color: #005ba0;
}
.contact-detail .mail a:hover{
    color: #005ba0;
}
.contact-detail .web a{
   text-decoration: none;
   color: #005ba0;
}
.contact-detail .web a:hover{
    color: #005ba0;
} 
.contact-icon{
    color: #005ba0;
}

@media (min-width: 320px) and (max-width: 767px){
    .contact-matter{
        width: 100%;
        height: auto;
        margin-top: 120px;
    }
    .map{
        width: 350px;
        height: 450px;
    }
    .contact-footer{
        margin-top: 1160px;
    }
    .contact-detail .call{
        margin-left: 80px;
    }
    .contact-detail .mail{
        margin-left: 60px;
    }
    .contact-detail .web{
        margin-left: 80px;
    }
    .contact-matter h3{
        margin-left: 80px;
    }

}
 
ntact-detail .mail{
        margin-left: 60px;
    }
    .contact-detail .web{
        margin-left: 80px;
    }
    .contact-matter h3{
        margin-left: 80px;
    }

}