@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600&display=swap');

*{
   font-family: 'Montserrat', sans-serif;
   margin:0; padding:0;
   box-sizing: border-box;
   outline: none; border:none;
   text-decoration: none !important;
   transition: all .2s linear;
}

html::-webkit-scrollbar{
    width: 1rem;
 }

 html::-webkit-scrollbar-track{
    background: transparent;
 }

 html::-webkit-scrollbar-thumb{
    background: brown;
 }
html{
   font-size: 62.5%;
   overflow-x: hidden;
   scroll-behavior: smooth;
   scroll-padding-top: 6rem;


}

@keyframes fadeIn {
   0%{
      transform: translateY(-2rem);
      opacity: 0;
   }
}
section{
   padding:5rem 1rem;
}

/* .style-align-center {
   text-align: center !important; 
   align-items: center !important;
} */
.active-pro{
    text-decoration: underline !important;
    text-underline-offset: 0.5rem;
    color: #00d38d !important;
}
.active-pro2{
   text-decoration: underline !important;
   text-underline-offset: 0.5rem;
   color: white !important;
}
.link-btn{
   margin-top: 1rem;
   padding:1rem 3rem;
   display: inline-block;
   /* border:.1rem solid brown; */
   /* color:brown; */
   background: none;
   /* // cursor: pointer; */
   font-size: 1.7rem;
}
.link-btn:hover{
      background: brown;
      color:white;
   }
.header-product .link-btn:hover{
    background: #e15f41;
}
.title-heading {
      position: relative;
      width: 300px;
      height: 50px;
      background: white;
      display: flex;
      overflow: hidden;
      justify-content: center;
      align-items: center;
      text-align: center;
   } 
    
   .title-heading::before{
      content: '';
      position: absolute;
      width: 800px;
      height: 800px;
      background: linear-gradient(#ff00d4,#08ffea);
      /* // background: linear-gradient(white,#ff6b6b); */
      animation: rotate1 2s infinite linear;
       -webkit-animation:rotate1 2s infinite linear ;
   }  
   .title-heading::after{
         position: absolute;
         content: '';
         inset: 4px;
         background:white;
      }
   @keyframes rotate1 {
      0%{   
         transform: rotate(0deg);
         -webkit-transform: rotate(0deg);
         -moz-transform: rotate(0deg);
         -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
      }
   
      100%{   
         transform: rotate(360deg);
         -webkit-transform: rotate(360deg);
         -moz-transform: rotate(360deg);
         -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
      }
   }
   .title-heading div{
      font-size: 3rem;
      color: black;
      z-index: 10;
   }
.heading{
      text-align: center;
      margin-bottom: 4rem;
      font-size: 3rem;
      text-transform: capitalize;
      color:black;
   }
  

.header {
   z-index: 1000;
   padding:4rem 0;
}
.header-product{
   /* // z-index: 1000; */
   /* padding:1rem 0; 
   margin-left: -5px;*/
   top: 90px; 
   padding-left: 25%;
   align-items: center;
}
.active2{
   padding:2rem 0;
   background:linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)),#58B19F;
}
.navproduct{
    background: #58B19F;
    border-radius: 10px 10px;
}
.active2product .navproduct {
    background: #58B19F;
 
 }
.active2product .navproduct a{
   color:black;

}

.navproduct a{
   font-size: 1.5rem;
   margin: 1rem;
   color:black;
}
.nav1 a {
  
    font-size: 2rem;
    margin-right: 2rem;
    color:white;
    color:black;
    
}
.navi-proe a {
  
    font-size: 2rem;
    margin-right: 2rem;
    color:black ;
    
}
.navproduct a:hover{
   text-decoration: underline !important;
   text-underline-offset: 0.5rem;
   color: white;
}
.nav1 a:hover{
        text-decoration: underline !important;
        text-underline-offset: 0.5rem;
        color: #00d2d3;
}
.navi-proe a:hover{
   text-decoration: underline !important;
   text-underline-offset: 0.5rem;
   color: #00d2d3;
}
.icons div{
    font-size: 2.5rem;
    color:rgb(16, 21, 61);
    margin-left: 1.5rem;
    cursor: pointer;
 }
 .icons i{
   font-size: 4rem;
   margin-bottom: 1.5rem;
   color:brown;
}

.icons h3{
font-size: 1.5rem;
}
 #menu-btn{
    display: none;
 }
 .login-from{
    position: fixed;
    top: 0; left: 0;
    z-index: 1100;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,.7);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;


}
.active1{
   display: flex;
}
.active2{
   display: flex;
}
.active2product{
   display: flex;
}
 .login-from form{
    width: 50rem;
    padding: 4rem;
    background: white;
    text-align: center;
    position: relative;
    animation: fadeIn .2s linear;
}
.login-from #close-login-form{
   position: absolute;
   top:-4rem; right:0;
   font-size: 3rem;
   cursor: pointer;
   color:white;
}
.login-from #close-login-form:hover{
      transform: rotate(90deg);
   }

.login-from .logo{
    font-size: 2.5rem;
    color:brown;
    font-weight: bolder;
 }
 .login-from  h3{
    padding:1rem 0;
    font-size: 2rem;
 }
 .login-from .box{
    width: 100%;
    padding:1.2rem 1.4rem;
    border:.1rem solid brown;
    font-size: 1.6rem;
    margin:1rem 0;
 }
 .login-from .flex{
   display: flex;
   align-items: center;
   gap:.5rem;
   margin: 1rem 0;
}
.login-from .flex label{
      font-size: 1.5rem;
      cursor: pointer;
   }

.login-from .flex a{
      font-size: 1.5rem;
      color:brown;
      margin-left: auto;
   }
.login-from .flex a:hover{
         text-decoration: underline !important;
      }
   
.login-from .link-btn{
         width: 100%;
         margin-bottom: 2rem;
      }
.account{
         padding:1.5rem .5rem;
         background: #eee;
         font-size: 1.5rem;
}
.account a{
         color:brown;
}
.account a:hover{
               text-decoration: underline !important;
}

.home{
    background:linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url(../img/mss/automation9.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
 }
.home span{
   font-size: 2rem;
   color:white;
}
.home h3{
   padding: 1rem 0;
   font-size: 4rem;
   color:white;
}
.home p{
   font-size: 1.5rem;
   color:white;
}
.home.link-btn{
   color:white;
   border-color: white;
}
/* .product-section1{
    background:linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url(../img/mss/automation9.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
 }
.product-section1 span{
   font-size: 2rem;
   color:white;
}
.product-section1 h3{
   padding: 1rem 0;
   font-size: 4rem;
   color:white;
}
.product-section1 p{
   font-size: 1.5rem;
   color:white;
}
.product-section1.link-btn{
   color:white;
   border-color: white;
} */

.product-section1{
   background: url(../img/mss/photo1.png) no-repeat;;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
 }
.product-section1 span{
   font-size: 2rem;
   color:black;
}
.product-section1 .product-box .style-align-center {
   text-align: center !important;
}
.product-section1 h3{
   padding: 1rem 0;
   font-size: 4rem;
   color:black;
}
.product-section1 p{
   font-size: 1.5rem;
   color:black;
}
.product-section1.link-btn{
   color:white;
   border-color: white;
}
.product-section2{
    background: url(../img/mss/photo1.png) no-repeat;;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
 }
.product-section2 span{
   font-size: 2rem;
   color:black;
}
.product-section2 h3{
   padding: 1rem 0;
   font-size: 4rem;
   color:black;
}
.product-section2 p{
   font-size: 1.5rem;
   color:black;
}
.product-section2.link-btn{
   color:white;
   border-color: white;
}
.bib_machine_img {
 
/* margin-top: 50%;   */
margin-left: -10%;
}
.product-box {
    box-sizing: border-box;
    position:absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%,-50%);
    width: 680px;
    height: 360px;
    padding: 30px 20px;

    /* display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 2fr));
    gap:2rem; */
    background: rgba(72, 145, 223, 0.1);
    box-shadow: 5px 5px 10px 5px;
    overflow: hidden;


}
.product-box2 {
    box-sizing: border-box;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 680px;
    height: 360px;
    padding: 30px 20px;
    background: white;
    box-shadow: 5px 5px 10px 5px;
    overflow: hidden;
}
.product-section3 {
    background: url(../img/mss/photo4.png) no-repeat;
    background-size: 1390px 400px;
    background-position-x: 0px;
    background-position-y: -100px;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 60px;
 }
 .product-section3 h3{
    font-size: 5rem;
}

 .product-section3 .credit{
    margin:2rem 0;
    font-size: 2rem;
    text-transform: capitalize;
    color:black;
    padding-bottom: 10px;
 }
 .product-section3 a{
    font-size: 3rem;
    box-sizing: border-box;
    border-radius: 8px 8px;
    position:absolute;
    transform: translate(-50%,-50%);
    width: 200px;
    height: 50px;
    padding-top: 3px;
    background: white;
    /* // box-shadow: 5px 5px 10px 5px; */
    overflow: hidden;
}
.product-section3 a:hover{
    background:brown;
    color:white;
 }
 
.pre-btn1, .nxt-btn1{
  border: none;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 40vh;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
  cursor: pointer;
  z-index: 9;
}
.pre-btn1 {
    left: 110px;
    transform: rotate(180deg);
}
.nxt-btn1 {
    right: 680px;
  }
.pre-btn1 img,
.nxt-btn1 img {
    opacity: 0.4;
}
  
.pre-btn1:hover img,
.nxt-btn1:hover img {
    opacity: 1;
  }

  .pre-btn1-bib, .nxt-btn1-bib{
   border: none;
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   bottom: -400px;
   background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
   cursor: pointer;
   z-index: 9;
 }
 .pre-btn1-bib {
     left: 180px;
     transform: rotate(180deg);
 }
 .nxt-btn1-bib {
     right: 180px;
   }
 .pre-btn1-bib img,
 .nxt-btn1-bib img {
     opacity: 0.4;
 }
   
 .pre-btn1-bib:hover img,
 .nxt-btn1-bib:hover img {
     opacity: 1;
   }

.carousel {
    transition: all 0.3s ease;
}
.carousel img{
    transition: all 0.3s ease;
}
.carousel .item {
    display: none;
}

.carousel .main-item {
    display: block;
}

.product-2line{
   margin-top: 3rem;
}
.product-2line .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
   gap:2rem;
}
.product-2line .box-container .box{
   text-align: center;
   padding:3rem 2rem;
   border-radius: .5rem;
   margin-top: 3rem;
   margin-bottom: 0rem;
   /* top: 2.5rem; */
}
.product-section2 .product-2line .box-container .box{
   text-align: center;
   padding:3rem 2rem;
   border-radius: .5rem;
   margin-top: 0rem;
   margin-bottom: 0rem;
   /* top: 2.5rem; */
}
.product-section2 .container {
   height:50vh!important
}
.product-2line .box-container .box:hover{
   background: white;
   box-shadow: 0 .5rem 1rem rgba(0,0,0,.5);
   transform: translateY(-1rem);
}
.product-2line .box-container .box img {
   height: 35rem;
   width: 40rem;
   /* border-radius: 50%; */
   /* margin-bottom: 1.5rem; */
   margin-top: 0rem;
}
.product-2line .box-container .box-minimum img {
   height: 20rem;
   width: 35rem;
   /* border-radius: 50%; */
   /* margin-bottom: 1.5rem; */
   margin-top: 1.5rem;
   margin-left: 50px;
}
.product-2line .box-container h1{
   font-size: 4rem;
   text-transform: capitalize;
   color:black;
   margin-bottom: 1.5rem;
}
.product-2line .box-container h2{
   font-size: 3rem;
   text-transform: capitalize;
   color:black;
   margin-bottom: 1.5rem;
}
.product-2line .box-container .h1-center h1{
   font-size: 6rem;
   text-transform: capitalize;
   color:black;
   margin-bottom: 1.5rem;
   margin-top: 4.5rem;
}
.product-2line .box-container h3{
   font-size: 2rem;
   text-transform: capitalize;
   color:black;
}
.product-2line .box-container h4{
   font-size: 2rem;
   /* text-transform: capitalize; */
   color:black;
   text-align: left;
   padding: 5px;
}
.product-2line .box-container p{
   font-size: 1.6rem;
   /* text-transform: capitalize; */
   color:black;
   padding:1rem 0;
}

.reviews{
    background: url(../img/mss/photo8.png) no-repeat;
 }
 .reviews .heading-efect{
    position: absolute;
    align-items: center;
    margin-bottom: 2rem;
    margin-top: 2rem;
    left: 50%;
    font-size: 3rem;
    transform: translate(-50%,-50%);
    padding: 10px 20px;
    /* // letter-spacing: 2px; */
    text-transform: capitalize;
    color: black;
    overflow: hidden;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 20px 50px rgb(255 255 255 / 5%);
 }
 .reviews .heading-efect::before{
 position: absolute;
 content: '';
 background: rgb(142 255 240 / 10%);
 
 }
 .reviews .heading-efect span:nth-child(1){
 position: absolute;
 width: 100%;
 height: 1.5px;
 top: 0px;
 left: 0x;
 background: linear-gradient(to right, #00cec9, white);
 animation: animate1 2s linear infinite ;
 
 }
 @keyframes animate1{
 0%{
     transform: translateX(-100%);
 }
 100%{
     transform: translateX(100%);
 }
 }
 .reviews .heading-efect span:nth-child(2){
 position: absolute;
 top: 0;
 right: 0;
 width: 1.5px;
 height: 100%;
 background: linear-gradient(to bottom, #00cec9, white);
 animation: animate2 2s linear infinite ;
 animation-delay: 1s;
 
 }
 @keyframes animate2 {
 0%{
     transform: translateY(-100%);
 }
 100%{
     transform: translateY(100%);
 }
 }
 .reviews .heading-efect span:nth-child(3){
 
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 1.5px;
 background: linear-gradient(to left, #ff7675, white);
 animation: animate3 2s linear infinite ;
 
 }
 @keyframes animate3 {
 0%{
     transform: translateX(100%);
 }
 100%{
     transform: translateX(-100%);
 }
 }
 .reviews .heading-efect span:nth-child(4){
 position: absolute;
 top: 0;
 left: 0;
 width: 1.5px;
 height: 100%;
 background: linear-gradient(to top, #ff7675, white);
 animation: animate4 2s linear infinite ;
 animation-delay: 1s;
 }
 @keyframes animate4 {
 0%{
     transform: translateY(100%);
 }
 100%{
     transform: translateY(-100%);
 }
 }
 .reviews .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap:2rem;
 }
 .reviews .box-container .box{
    text-align: center;
    padding:3rem 2rem;
    border-radius: .5rem;
 }
 .reviews .box-container .box:hover{
    background: white;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.5);
    transform: translateY(-1rem);
 }
 .reviews .box-container .boximg {
    height: 10rem;
    width: 10rem;
    /* border-radius: 50%; */
    margin-bottom: 1.5rem;
 }
 .reviews .box-container .boximg {
    height: 10rem;
    width: 10rem;
    /* border-radius: 50%; */
    margin-bottom: 1.5rem;
 }
 .reviews .box-container h3{
    font-size: 2rem;
    text-transform: capitalize;
    color:black;
 }
 .reviews .box-container p{
    font-size: 1.6rem;
    text-transform: capitalize;
    color:black;
    padding:1rem 0;
 }
 .reviews .box-container .stars{
    margin-top: 1rem;
}
.reviews .box-container .stars   i{
       font-size: 1.7rem;
       color:brown;
    }

.footer {
   background:linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url(../img/mss/hokkaido2.png) no-repeat;
   background-size: cover;
   background-position: center;
   text-align: center;
   padding-top: 20px;
   padding-bottom: 20px;
}
.footer .logo{
   font-size: 3rem;
   color: brown;
   font-weight: bolder;
}
.footer .credit{
   margin:2rem 0;
   font-size: 2rem;
   text-transform: capitalize;
   color:white;
}
.footer .credit span{
   text-decoration: underline !important;
}
.footer .share{
   margin-top: 3rem;
}
.footer .share a{
   height: 5rem;
   width: 5rem;
   line-height: 5rem;
   font-size: 2rem;
   border:.1rem solid brown;
   color:brown;
   margin:0 .3rem;
}
.footer .share a:hover{
   background:brown;
   color:white;
}

.career .heading-efect{
   position: absolute;
   align-items: center;
   margin-bottom: 2rem;
   margin-top: 2rem;
   left: 50%;
   /* font-size: 3rem; */
   transform: translate(-50%,-50%);
   padding: 10px 20px;
   /* // letter-spacing: 2px; */
   text-transform: capitalize;
   color: black;
   overflow: hidden;
   text-decoration: none;
   font-weight: bold;
   box-shadow: 0 20px 50px rgb(255 255 255 / 5%);
}
.career .heading-efect::before{
position: absolute;
content: '';
background: rgb(142 255 240 / 10%);

}
.career .heading-efect span:nth-child(1){
position: absolute;
width: 100%;
height: 1.5px;
top: 0px;
left: 0x;
background: linear-gradient(to right, #00cec9, white);
animation: animate1 2s linear infinite ;

}
@keyframes animate1{
0%{
    transform: translateX(-100%);
}
100%{
    transform: translateX(100%);
}
}
.career .heading-efect span:nth-child(2){
position: absolute;
top: 0;
right: 0;
width: 1.5px;
height: 100%;
background: linear-gradient(to bottom, #00cec9, white);
animation: animate2 2s linear infinite ;
animation-delay: 1s;

}
@keyframes animate2 {
0%{
    transform: translateY(-100%);
}
100%{
    transform: translateY(100%);
}
}
.career .heading-efect span:nth-child(3){

position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1.5px;
background: linear-gradient(to left, #ff7675, white);
animation: animate3 2s linear infinite ;

}
@keyframes animate3 {
0%{
    transform: translateX(100%);
}
100%{
    transform: translateX(-100%);
}
}
.career .heading-efect span:nth-child(4){
position: absolute;
top: 0;
left: 0;
width: 1.5px;
height: 100%;
background: linear-gradient(to top, #ff7675, white);
animation: animate4 2s linear infinite ;
animation-delay: 1s;
}
@keyframes animate4 {
0%{
    transform: translateY(100%);
}
100%{
    transform: translateY(-100%);
}
}
.career .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
   gap:2rem;
}
.career .box-container .box{
   overflow:hidden;
   position: relative;
   height: 25rem;
}

.career .box-container .box:hover{
   box-shadow: 0 .5rem 1rem rgba(0,0,0,.5);
   border:.1rem solid brown;
}
.career .box-container .box:hover img{
   transform: translateY(-100%);
}
.career .box-container .box:hover .content-h1{
   transform: translateY(-100%);
}
.career .box-container .box:hover .content-h1 image{
   transform: translateY(-100%);
}
.career .box-container .box:hover .content{
   transform: translateY(0);
}
.career .box-container .box .content-h1{
   text-align: center;
   /* font-size: xx-large; */
   text-decoration: underline !important;
   text-decoration-color: red !important;
   text-underline-offset: 0.5rem;
}
.career .box-container .box img{
   height: 90%;
   width: 100%;
   object-fit: cover;
}
.career .box-container .box .content{
   position: absolute;
   top:0; left:0;
   background:linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.3)),#3ff8f5;
   text-align: center;
   padding:3rem 2rem;
   height: 100%;
   width: 100%;
   transform: translateY(100%);
   padding-top: 4rem;
}
.career .box-container .box .content h3{
   padding:1rem 0;
   font-size: 2rem;
   line-height: 2;
   color:black;
   margin-bottom: 0;
}
.career .box-container .box .content p{
   padding:1rem 0;
   font-size: 1.5rem;
   line-height: 2;
   color: white;
   margin-bottom: 0;
}


.contact{
   background: url(../img/mss/photo1.png) no-repeat;;
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
}
.contact .heading-efect{
   position: absolute;
   align-items: center;
   margin-bottom: 2rem;
   margin-top: 2rem;
   left: 50%;
   font-size: 3rem;
   transform: translate(-50%,-50%);
   padding: 10px 20px;
   /* // letter-spacing: 2px; */
   text-transform: capitalize;
   color: black;
   overflow: hidden;
   text-decoration: none;
   font-weight: bold;
   box-shadow: 0 20px 50px rgb(255 255 255 / 5%);
}
.contact .heading-efect::before{
position: absolute;
content: '';
background: rgb(142 255 240 / 10%);

}
.contact .heading-efect span:nth-child(1){
position: absolute;
width: 100%;
height: 1.5px;
top: 0px;
left: 0x;
background: linear-gradient(to right, #00cec9, white);
animation: animate1 2s linear infinite ;

}
@keyframes animate1{
0%{
    transform: translateX(-100%);
}
100%{
    transform: translateX(100%);
}
}
.contact .heading-efect span:nth-child(2){
position: absolute;
top: 0;
right: 0;
width: 1.5px;
height: 100%;
background: linear-gradient(to bottom, #00cec9, white);
animation: animate2 2s linear infinite ;
animation-delay: 1s;

}
@keyframes animate2 {
0%{
    transform: translateY(-100%);
}
100%{
    transform: translateY(100%);
}
}
.contact .heading-efect span:nth-child(3){

position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1.5px;
background: linear-gradient(to left, #ff7675, white);
animation: animate3 2s linear infinite ;

}
@keyframes animate3 {
0%{
    transform: translateX(100%);
}
100%{
    transform: translateX(-100%);
}
}
.contact .heading-efect span:nth-child(4){
position: absolute;
top: 0;
left: 0;
width: 1.5px;
height: 100%;
background: linear-gradient(to top, #ff7675, white);
animation: animate4 2s linear infinite ;
animation-delay: 1s;
}
@keyframes animate4 {
0%{
    transform: translateY(100%);
}
100%{
    transform: translateY(-100%);
}
}
.contact .contact-info-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
   gap:2rem;
   margin-bottom: 3rem;
}
.contact .contact-info-container .box{
   border:.1rem solid brown;
   padding:3rem 2rem;
   border:.1rem solid brown;
   text-align: center;
}
.contact .contact-info-container .box:hover i{
   background: brown;
   color:white;
}
.contact .contact-info-container .box i{
   height: 6rem;
   width: 6rem;
   line-height: 6rem;
   border:.1rem solid brown;
   color:brown;
   font-size: 2rem;
   margin-bottom: 1rem;
}
.contact .contact-info-container .box h3{
   font-size: 2rem;
   /* // text-transform: capitalize; */
   color:black;
   padding:1rem 0;
}
.contact .contact-info-container .box p{
   font-size: 1.5rem;
   /* // text-transform: capitalize; */
   color:black;
}
.contact .border-bib h4{
   margin-top: 1rem;
   padding:1rem 3rem;
   /* display: inline-block; */
   border:.1rem solid brown;
   color:brown;
   background: none;
   /* // cursor: pointer; */
   font-size: 1.7rem;
   text-align: center;
}
.contact .border-bib img{
      margin-left: 50%;
      margin-top: -5%;
      margin-bottom: -5%;
}
.contact form h3{
   font-size: 3rem;
   text-transform: capitalize;
   color:black;
   padding-bottom: 1rem;
}
.contact form .box{
   margin:.7rem 0;
   border:.1rem solid brown;
   font-size: 1.6rem;
   width: 100%;
   padding:1.2rem 1.4rem;
}
.contact form .box:focus{
   background: brown;
   color:white;
}
.contact form .box::placeholder{
   color:gray;
}
.contact form textarea{
   height: 15rem;
   resize: none;
}

.gallery .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
   gap:2rem;
}
.gallery .box-container .box{
   overflow:hidden;
   position: relative;
   height: 35rem;
}
.gallery .box-container .box:hover{
   box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
   border:.1rem solid brown;
}
.gallery .box-container .box:hover img{
   transform: translateY(-100%);
}
.gallery .box-container .box:hover .content{
   transform: translateY(0);
}
.gallery .box-container .box img{
   height: 100%;
   width: 100%;
   object-fit: cover;
}
.gallery .box-container .box .content{
   position: absolute;
   top:0; left:0;
   background:white;
   text-align: center;
   padding:3rem 2rem;
   height: 100%;
   width: 100%;
   transform: translateY(100%);
   padding-top: 4rem;
}
.gallery .box-container .box .content h3{
   padding:1rem 0;
   font-size: 2rem;
   line-height: 2;
   color:#666;
   margin-bottom: 0;
}
.gallery .box-container .box .content p{
   padding:1rem 0;
   font-size: 1.5rem;
   line-height: 2;
   color:#666;
   margin-bottom: 0;
}







.hoverDisabled {
   pointer-events: none;
}

.container-table table {
   border-collapse: collapse;
   width: 100%;
   background-color: #ffffff;
   box-shadow: 0px 0px 1px 0px 
}

.container-table table td {
   border: 1px solid gray; 
   border-right: none;
   padding: 10px;
   font-size: 15px;
}
.container-table .col-header-col-1 {
   text-align: left;
   font-size: 30px;
   font-weight: 300px;
   border-right: none;
   border-top: none;
   color: #145251;
}
.container-table .col-header-col-2 {
   border-top: none;
   border-right: none;
   border-left: none;
}
.container-table .col-1 {
      text-align: left;
      color: rgb(64, 64, 194);
}
.container-table .col-2 {
   text-align: left;

}








 /* // media queries  */

@media (max-width:991px){

   html{
      font-size: 55%;
      scroll-padding-top: 8rem;
   }

   .home h3{
      font-size: 4rem;
   }

   section{
      padding:3rem 0;
   }

}

@media (max-width:768px){

   .login-form form{
      padding:3rem 2rem;
   }   
   .login-form form h3{
         font-size: 1.7rem;
      }

   .header{
      padding:4rem 2rem;
   } 
   .header-product{
      padding:4rem 2rem;
   }   
   .header.active2{
         padding:2rem;
      }

   .header #menu-btn{
         display: inline-block;
      }
   #menu-btn.fa-times{
            transform: rotate(180deg);
         }
   .header-product #menu-btn{
      display: inline-block;
   }
   .header-product #menu-btn.fa-times{
      transform: rotate(180deg);
   }

   .header .nav1{
         position: absolute;
         top:99%; left:0; right:0;
         background: white;
         flex-flow: column;
         padding:1rem 0;
         clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
   }
   .header-product .navproduct{
      position: absolute;
      top:99%; left:0; right:0;
      background: white;
      flex-flow: column;
      padding:1rem 0;
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

   .nav1.active2{
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
         }

   .nav1.active2 a{
            margin:1rem 2rem;
            color:black;
         }
      
   
   .contact .map{
      height: 25rem;
   }

}

@media (max-width:450px){

   html{
      font-size: 50%;
   }

}