@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Syne:wght@400..800&display=swap');

.container {
    max-width: 1300px !important;
  }

:root {
    --dark-green: #063137;
    --light-green: #065ec3;
  
    --blueshop: #004ea2;
    --bbps-blue: #004ea2;
  
    --black: #131312;
    --cream: #f2f4f39f;
    --white: #ffffff;
  
    --favorite-yellow-light: #52b3f4;
    --favorite-yellow-dark: #c7f571;
    --deep-green: #0c0e0d;
    --forest-green: #204339;
  
    --deep-green-tr:#0c0e0de4;
  
    --gradient-a: linear-gradient(to right top, #000000, #040404, #070707, #0b0b0b, #0e0e0e);
    --gradient-b: linear-gradient(to right top, #204339, #1d352d, #192822, #141c18, #0c0e0d);
  
    --gradient-c: linear-gradient(to right top, #ca13ff, #ab0fe1, #8d0ac2, #7104a4, #570087);
  
  }


h1,h2,h3,h4,h5,h6, a, button{
	font-family: "Syne", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

p{
	font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}
	html,
	body {
		margin: 0;
		width: 100%;
		height: 100%;
    overflow-x: hidden;
    position:  relative;
    
        
	}

    body{
        background: #d9dedc !important;
        
        
        
    }



      .scrolled {
        
        background-color: var(--white);
       
        box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -20px;
        border-radius:100px;
    }



    ::view-transition-old(fotoZoom),
::view-transition-new(fotoZoom) {
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

@keyframes zoomOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.8); }
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(1.2); }
  to { opacity: 1; transform: scale(1); }
}

::view-transition-old(fotoZoom) {
  animation-name: zoomOut;
}

::view-transition-new(fotoZoom) {
  animation-name: zoomIn;
}
   

.button-s{
  background-color: #000000;
  border: 0;
  padding: 7px 15px;
  color:#fff;

}

.shop-t{
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1)50%, rgba(0, 0, 0, 0))
}