@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; */
}

/* $main-color:#512a10;
$black:#222;
$white:#fff;
$light-color:#666;
$light-bg:#eee;
$border:.1rem solid $main-color;
$box-shadow:0 .5rem 1rem rgba(0,0,0,.1);

@mixin gird($val) {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax($val, 1fr));
   gap:2rem;
}

@mixin title-text($titleSize) {
   font-size: $titleSize;
   text-transform: capitalize;
   color:black;
}

@mixin graph-text($graphSize) {
   font-size: $graphSize;
   line-height: 2;
   color:#666;
   margin-bottom: 0;
} */
body::-webkit-scroolbar {
    width: 1rem;
 }

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

 body::-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;
   }
}
.MSS-font {
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 3rem;
   color: #079992;
   overflow: hidden;
}
nav {
   /* min-height: 10vh; */
   display: flex;
   justify-content: center;
   align-items: center;

 }
 
.home-new_profile .hero-section_profile {
   /* height: 90vh; */
   /* margin: 0% 10%; */
   margin: 10% 0% 0% 20%;
 }
 .hero-section_profile img {
   width: 70%;
   height: 70%;
   object-fit: cover;
 }
 
 .home-new_philosophy .hero-section_philosophy {
   /* height: 90vh; */
   /* margin: 0% 10%; */
   margin: 0;
   margin-top: 15%;
 }
 .hero-section_philosophy img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .logohome {
   font-size: 3rem;
   color: #079992;
   overflow: hidden;

 }

.home-new .hero-section {
   height: 90vh;
   /* margin: 0% 10%; */
   margin: -3% 1% 3% 1%;
 }
 .hero-section img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
 .cta {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: white;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 .cta-text {
   display: flex;
   /* font-size: 4rem; */
 }
 .cta-text h1 {
   /* font-size: 35px; */
   overflow: hidden;
 }
 .cta-text span {
   /* padding: 0rem 1.4rem; */
   display: block;
   text-shadow: rgba(0, 0, 0, 0.4) 0px 0px 20px;
 }
 .cta-btn {
   margin: 1rem;
   padding: 0.5rem 2rem;
   background: white;
   font-family: "Poppins";
   border-radius: 0.3rem;
   color: rgb(33, 33, 33);
   border: none;
   font-size: 2.0rem;
 }
 .cta-btn a{
   color: rgb(165, 13, 13);
 }
 .cta-btn:hover{
   background: brown;
}
.cta-btn a:hover{
   color: white;
}
section{
   padding:5rem 1rem;
}

.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: brown;
   color:white;
}
.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: 50%;
}
.active2{
   padding:2rem 0;
   background:linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)),#e15f41;
}
.active2product .navproduct a{
   color:black;
}

.navproduct a{
   font-size: 1rem;
   margin: 1rem;
   color:white;
}
.nav1 a {
  
    font-size: 2rem;
    margin-right: 2rem;
    color:white;
    
}
.navproduct a:hover{
   text-decoration: underline !important;
   text-underline-offset: 0.5rem;
   color: #00d2d3;
}
.nav1 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;
 }

 #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;
}

 
 .dropdown {
   position: relative;
   display: inline-block;
 }
 
 .dropdown-content {
   display: none;
   position: absolute;
   background-color: rgba(0,0,0,0.8);
   min-width: 200px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
 }
 
 .dropdown-content a {
   font-size: 14px;
   color: white;
   padding: 12px 14px;
   text-decoration: none;
   display: block;
 }
 
 .dropdown-content a:hover {background-color: rgba(255,255,255,0.4); }
 
 .dropdown:hover .dropdown-content {display: block;}
 




/* .home{
    background:linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url('../img/mss/CIMG2494.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;
} */



.about span{
   font-size: 2.5rem;
   color:brown;
}
.about p{
   padding:1rem 0;
   font-size: 1.6rem;
}
.about .icons-container{
   display: flex;
   flex-wrap: wrap;
   margin-top: 3rem;
   gap:1.5rem;
}
.icons-container .icons{
      padding:2rem;
      background: #eee;
      text-align: center;
      flex:1 1 14rem;
}
.icons i{
         font-size: 4rem;
         margin-bottom: 1.5rem;
         color:brown;
      }

.icons h3{
      font-size: 1.5rem;
   }
.philosophy{
   background: white;
}
.philosophy .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%);
  }
.philosophy .heading-efect::before{
   position: absolute;
   content: '';
   background: rgb(142 255 240 / 10%);

}
.philosophy .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%);
   }
}
.philosophy .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%);
   }
}
.philosophy .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%);
   }
}
.philosophy .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%);
   }
}
.philosophy .title{
      padding-top: 1rem;
      font-size: 3rem;
}

.philosophy p{
      padding:1rem 0;
      font-size: 1.6rem;
}

.philosophy .box-container{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
      gap:3rem;
}

.philosophy .box-container .box{
      overflow:hidden;
      position: relative;
      height: 20rem;
}
.philosophy .box-container .box:hover{
      box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
      border:.1rem solid brown;
}
.philosophy .box-container .box:hover img{
      transform: translateY(100%);
}
.philosophy .box-container .box:hover .content{
      transform: translateY(0);
}
.philosophy .box-container .box img{
      height: 100%;
      width: 100%;
      object-fit: cover;
}
.philosophy .box-container .box .content{

      position: absolute;
      top:0; left:0;
      background:white;
      text-align: justify;
      padding:3rem 2rem;
      height: 100%;
      width: 100%;
      transform: translateY(100%);
      padding-top: 4rem;
}
.philosophy .box-container .box .content h3{
      padding:0rem 0;
      font-size: 2rem;
      color:#666;
      margin-bottom: 0;
      color: #f53b57;
}
.philosophy .box-container .box .content p{

      padding:0rem 0;
      font-size: 1.0rem;

      color:#666;
      margin-bottom: 0;
}

.product{
   background: #f2fafa;
   
   }
.product .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%);
  }
.product .heading-efect::before{
   position: absolute;
   content: '';
   background: rgb(142 255 240 / 10%);

}
.product .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%);
   }
}
.product .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%);
   }
}
.product .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%);
   }
}
.product .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%);
   }
}
.product .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
   gap:2rem;
   }
.product .box-container .box{
      text-align: left;
      padding:3rem 2rem;
      border-radius: .5rem;
   }
.product .box-container .box:hover{
         background: white;
         box-shadow: 0 .5rem 1rem rgba(0,0,0,.3);
         transform: translateY(-1rem);
      }

.product .box-container .box img{
         height: 15rem;
         margin-bottom: 2rem;
      }
.product .box-container .box h3{
   font-size: 2rem;
      }

.product .box-container .box p{
         padding:1rem 0;
         font-size: 1.5rem;
      }

.gallery {
   background: white;
}
.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: 25rem;
}
.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;
}

.reviews{
   background: white;
}
.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 .box img {
   height: 10rem;
   width: 10rem;
   border-radius: 50%;
   margin-bottom: 1.5rem;
}
.reviews .box-container .box img {
   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;
}
.career{
   background: #f2fafa;
}
.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{
   transform: translateY(0);
}
.career .box-container .box img{
   height: 90%;
   width: 100%;
   object-fit: cover;
   border:.1rem solid brown;
   border-radius: 50% 50%;
}
.career .box-container .box .content{
   position: absolute;
   top:0; left:0;
   background:linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.3)),#34e7e4;
   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:#f53b57;
   margin-bottom: 0;
}


.contact{
   background: white;
}
.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 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;
}

.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;
}

















 /* // 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%;
   }

}