*{
    box-sizing: border-box;
    margin:0;
    padding:0;
}


 
/* Navbar */
.nav {
    height: 4.5rem;
    width: 100%;
    position: fixed;
    justify-content:space-evenly;
    display: flex;
    transition: 1s ease-in-out;
    z-index: 10;
    background: linear-gradient(to right, #687864, #8FC1E3);
  }
  
  .nav-links #shop-link{
    display: none;
  }
  @media (max-width: 1000px){
    .nav-links #shop-link{
      display: block;
    }
  }
  
  .nav > .nav-header {
    display:flex;
    justify-content:center;
    align-items: center;
    margin-left : -4rem ;
  }
  
  .nav > .nav-header > .nav-title {
    display: inline-block;
    padding: 0 .75rem ;
    margin-top: -.2rem;
    margin-left: 2.5rem;
    transition: 0.3s  ease;
  }
  
  .nav > .nav-btn {
    display: none;
  }
  .nav .nav-links{
   
    margin-top: 2rem;
    }
    
    .nav > .nav-links .n-l {
        display: inline;
        float: right;
        font-size: 1rem;
        margin-top: -0.5rem;
      }
      .nav > .nav-links > .n-l > ul li a{
        display: block;
        padding: 0 8px;
        color: #fff;
        font-weight: 700;
        font-size: 15px;
        text-decoration: none;
      
      }
      .nav > .nav-links> .n-l > ul{
        padding: 0;
        list-style: none;
        position: relative;
        
      }
      .nav > .nav-links> .n-l > ul li{
        display: inline-block;
        transition: 0.3s ease;
        
      }
      .nav-links .n-l ul li.active a {
        border: 0.125em solid #fff;
        background-color: #fff;
        border-radius: 5px;
        color: #000;
        box-shadow:
          inset 0 0 0.5em 0 #fff,
          0 0 0.5em 0 #fff;
    }
      .nav > .nav-links> .n-l> ul li:hover{
          background-color: #fff;
          border-radius: 5px;
      }
      .nav > .nav-links > .n-l > ul li a:hover{
        border: #fff .125em solid;
        border-radius: 0.25em;
        box-shadow:
          inset 0 0 0.5em 0 #fff,
          0 0 0.5em 0 #fff;
          color: #000;
      }
      .nav > #nav-check {
        display: none;
      }
  
      .nav .nav-links ul a.icon{
       
        margin-right: 50px;
        color: black;
        }
  
        @media (max-width:1000px) {
  
            .nav{
              justify-content: space-between;
            }
            
            .nav > .nav-header > .nav-title {
              /* margin-top: 1rem; */
              padding: 0 .25rem;
              margin-left: 0px;
            }
            .nav > .nav-header > .nav-title img{
              height: 35px;
              width: auto;
            }
          
            .nav > .nav-btn {
              display: inline-block;
              position: absolute;
              right: 20px;
              top: 0.5rem;
            }
        
        .nav > .nav-btn > label {
            display: inline-block;
            width: 50px;
            height: 50px;
            padding: 13px;
          }
          .nav > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {
            background-color: rgba(0, 0, 0, 0.3);
          }
          .nav > .nav-btn > label > span {
            display: block;
            width: 25px;
            height: 10px;
            border-top: 2px solid #eee;
          }
          .nav > .nav-links {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            width: 100%;
            background-color: #000000;
            opacity: 90%;
            height: 0px;
            transition: all 0.3s ease-in;
            overflow-y: hidden;
            top: 2.1rem;
            right: 0px;
          }
          .nav > .nav-links .n-l {
            margin-top: 1rem;
          }
          .nav > .nav-links > ul li a {
            display: flex;
            width: 100%;
          }
        
          .nav > .nav-header{
            margin-left: 0;
          }
        
         
        
        
          
            .nav > .nav-links >.n-l > ul li{
              display: block;
              margin-bottom: 20px;
              padding: 0;
             
       
               
            }
            .nav > .nav-links > ul li a{
                margin-left: 20%;
            }
            .nav .nav-links ul a.icon{
              margin-left:20%;
            }
        
            .mlinks{
              color: white;
            }
        
            
        
          /*   */
          .nav > #nav-check:not(:checked) ~ .nav-links {
            height: 0px;
          }
          .nav > #nav-check:checked ~ .nav-links {
            height: 70vh;
            overflow-y: auto;
            
          }
  
          .social-links{
            visibility: hidden;
          }
          .nav .nav-links .social-link {
            display: block !important;
        }
        }
        .halca{
          animation-name:glow;
          animation-duration:1s;
          animation-iteration-count:infinite;
          animation-direction:alternate;
        }
      
      @keyframes glow{
        from{text-shadow:0px 0px 5px #fff,0px 0px 5px #614ad3;}
        to{text-shadow:0px 0px 30px #fff,0px 0px 30px #614ad3;}
      }
      
      .nav .social-links {
        text-align: center;
        margin: 5px 0px;
        margin-top: 1rem;
    }
  
    .nav .social-links button{
      width:10rem;
      height: 2.5rem;
      border: none;
      border-radius: 3rem;
      font-size: 1rem;
      background-image: url(../static/img/gold-btn.png);
      
    }
  
    .nav .social-links button strong{
      margin-top:3rem;
      font-size: 15PX;
    }
  
    .nav .social-links button img{
      width: 2.5rem;
    }
  
/* FOOTER */

footer{
  width: 100%;
  background: linear-gradient(to right, #687864, #8FC1E3);
  color:#fff;
  padding: 50px 0 30px;
  font-size: 13px;
  line-height: 20px;
}

.social-icons .fa-brands{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-size: 25px;
  color:#030303;
  background: #fff;
  margin-left: 8px;
  cursor: pointer;
  margin: auto;
}
.social-icons .fa-brands:hover{
  /* background : linear-gradient ( -45 deg , #ed1c94, #ffec17 ); */
  background: linear-gradient(-45deg, #687864, #8FC1E3);
}

hr{
  width: 90%;
  border: 0;
  border-bottom: 1px solid #ccc;
  margin: 20px auto;
  margin-right: 20px;
}
.copyright{
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
}

.shyno-add{
  /* border: 1px solid white; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.shyno-add .client_logo{
  margin-bottom: 15px;
}

.shyno-add h6{
  /* border: 1px solid white; */
  text-align: center;
}

.shyno-div{
  width: 100%;
  /* border: 2px solid white; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.shyno-div .footer-logo img{
  width: 7rem;
}
.shyno-div > p{
  color: #000;
  font-size: 1.1rem;
  padding-top: .5rem;
 text-align: center;
}
.shyno-links{
  color: #000;
}
.shyno-links h6{
  font-size: 1.3rem;
}
.shyno-links p{
  font-size: 1rem;
}


@media (max-width:1000px){
  .footer-socialLinks{
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .f-s-content span{
    font-size: .9rem;
  }
  .row{
    text-align: center;
  }
}
@media (max-width:1000px) {
  .footer-section .underline-container {
    margin-left: 125px;
  }
}
@media (min-width:1000px) {
  .footer-section{
    margin-left: -110px;
  }
}
.underline-container {
  position: absolute;
  margin-top: -20px;
  width: 100px;
  height: 2px;
  border-radius: 5px;
  overflow: hidden;
}

.animated-underline {
  width: 20px;
  height: 2px;
  background-color: grey;
  border-radius: 3px;
  animation: moving 2s linear infinite;
}

@keyframes moving {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}



  

/* Upload section */

.contain-y{
    padding-top: 80px;
    padding-bottom: 50px;
}


/* shop grid */
.shop_grid{
  display: grid; 
  grid-template-columns: repeat(1, 1fr); 
  row-gap: 1rem;
  column-gap: 4rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width:768px) {
  .shop_grid {
    grid-template-columns: repeat(2, 1fr); 
  }
}
@media (min-width:1100px) {
  .shop_grid {
    grid-template-columns: repeat(3, 1fr); 
  }
}