html {
    scroll-behavior: smooth;
}

:root {
  --gradient-primary: linear-gradient(115deg, #f9ce34, #ee2a7b, #6228d7);

  --gradient-secondary: linear-gradient(180deg, #464646, #989898);

  --color-siteprimary-100: #464646;
  --color-siteprimary-200: #989898;
  --color-siteprimary-300: #353535;

  --color-siteblack: #333333;
  --color-siteblack-modal : #333333E6;
  --color-sitewhite: #f2f2f2;

  --color-sitegrey-primary: #999999;
  --color-sitegrey-secondary: #e0e0e0;
  --color-sitegrey-tertiary: #d9d9d9;

  --color-success-primary: #329A39;
  --color-success-primary-hover: #93CD92;

  --color-danger-primary: #9f0712;
  --color-danger-primary-hover: #E86E5E;

}





.bg-gradient-secondary {
  background: var(--gradient-secondary);
}


.font-primary {
  font-family: "Montserrat", sans-serif;
}

.font-secondary {
  font-family: "Inter", sans-serif;
}




/* container */
.container {
  padding: 1rem 4rem 1rem 4rem  ;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .container {
    padding: 1rem 2rem 1rem 2rem  ;
  }
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  .container {
    padding: 1rem 1rem 1rem 1rem  ;
  }
}

.section-container {
  padding: 2rem 4rem 2rem 4rem  ;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .section-container {
    padding: 2rem 2rem 2rem 2rem  ;
  }
}

@media screen and (min-width: 0px) and (max-width: 768px) {
  .section-container {
    padding: 2rem 1rem 2rem 1rem  ;
  }
}




.bo{
  border: 2px solid black ;
}

.btn-primary {
    @apply bg-linear-to-r from-primary to-secondary text-white px-6 py-3 rounded-xl font-semibold shadow-md hover:opacity-90 transition;
}

.btn-accent {
    @apply bg-accent text-white px-6 py-3 rounded-xl font-semibold shadow-md hover:bg-yellow-500 transition;
}

.section {
    @apply py-16;
}






/* user selection */
::selection {
  background-color: #333333;
  color: white;
}

::-moz-selection {
  background-color: #333333;
  color: white;
}



.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE & Edge */
    scrollbar-width: none;     /* Firefox */
}