@import url("./main.css");
@import url("./responsive.css");

@import url('../assets/fonts/Euclid\ Circular\ A\ Bold.ttf');
@import url('../assets/fonts/Euclid\ Circular\ A\ Regular.ttf');
@import url('../assets/fonts/Euclid\ Circular\ A\ Medium.ttf');

:root {
  --black: #000000;
  --white: #ffffff;
  --primary: #011E41;
  --secondary: #2A7DE1;
  --green: #00B189;
  --slide_fs: calc(24px + (40 - 24) * ((100vw - 820px) / (1920 - 820)));
  --breadcrumbs_fs:  calc(13px + (14 - 13) * ((100vw - 820px) / (1920 - 820)));
  --title_fs: calc(22px + (24 - 22) * ((100vw - 820px) / (1920 - 820)));
  --category_name_fs: calc(26px + (40 - 26) * ((100vw - 820px) / (1920 - 820)));
  --nav_fs: calc(13px + (14 - 13) * ((100vw - 820px) / (1920 - 820)));
  --list_fs: calc(13px + (16 - 13) * ((100vw - 820px) / (1920 - 820)));
  --btn_fs: calc(12px + (14 - 12) * ((100vw - 820px) / (1920 - 820)));
  --input_fs: calc(13px + (16 - 13) * ((100vw - 820px) / (1920 - 820)));
  --text_fs: calc(12px + (17 - 13) * ((100vw - 820px) / (1920 - 820)));
  --about_text_fs: calc(12px + (18 - 12) * ((100vw - 820px) / (1920 - 820)));
  --box_title_fs: calc(16px + (20 - 16) * ((100vw - 820px) / (1920 - 820)));
  --sale_fs: calc(10px + (32 - 20) * ((100vw - 820px) / (1920 - 820)));
  --ff_regular: "Euclid Circular A Regular";
  --ff_medium: "Euclid Circular A Medium";
  --ff_bold: "Euclid Circular A Bold";
  --radius: 5px;
  --transition: all ease 0.3s;
  --header_height: 120px;
  --header_scrolled_height: 90px;
  --nav_up: -120px;
  --section_mb: 8%;
}

/*********************** fonts **************************/
@font-face {
  font-family: 'Euclid Circular A Regular';
  src: url('../assets/fonts/Euclid\ Circular\ A\ Regular.ttf');
}
@font-face {
  font-family: 'Euclid Circular A Medium';
  src: url('../assets/fonts/Euclid\ Circular\ A\ Medium.ttf');
}
@font-face {
  font-family: 'Euclid Circular A Bold';
  src: url('../assets/fonts/Euclid\ Circular\ A\ Bold.ttf');
}
/*********************** reset **************************/
* {
  transition: var(--transition);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: none;
}

body{
  font-family: var(--ff_regular);
  scroll-behavior: smooth;
}

button,
button:focus{
  border: none;
}
input,
input:focus,
textarea,
textarea:focus{
  border: none;
  outline: none;
  box-shadow: none;
}
img{
  max-width: 100%;
  object-fit: cover;
  object-position: center;
}
ul{
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
}
a{
  text-decoration: none;
}
h1, h4{
  font-family: var(--ff_medium);
}

/*********************** classes **************************/
.text{
  font-size: var(--text_fs);
}
.grid_ {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    margin-inline: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .grid_1920{
    width: min(100%, 1920px);
    height: 100%;
    margin: 0 auto;
    margin-inline: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .container_ {
    width: min(90%, 1560px);
    margin: 0 auto;
    margin-inline: auto;
    position: relative;
  }
.flexCenter{
  display: flex;
  align-items: center;
  justify-content: center;
}

/************************************************/

@media screen and (min-width: 1921px) {
  :root {
    --slide_fs: 40px;
    --breadcrumbs_fs: 12px;
    --title_fs: 24px;
    --category_name_fs: 40px;
    --nav_fs: 14px;
    --list_fs: 16px;
    --btn_fs: 14px;
    --input_fs: 16px;
    --text_fs: 17px;
    --box_title_fs: 20px;
  }

  .container_{
    width: min(81.2%, 1920px);
  }
}

@media screen and (max-width: 1000px) {
  :root {
    --header_height: 80px;
    --header_scrolled_height: 70px;
    --nav_up: -100px;
    --about_text_fs: 16px;
    --text_fs: 16px;
  }

  
}

/**************************************************************************/

::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  /* background: var(--textLight); */
  background-color: #f2f2f2;
  margin-left: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--primary);
  width: 6px;
  opacity: 1;
}
/************************************************************************************/

@keyframes zoom_out {
  from {transform: scale(1.5)}
  to {transform: scale(1)}
}
@keyframes zoom_in {
  from {transform: scale(0.8)}
  to {transform: scale(1)}
}
@keyframes slide_right {
  from {transform: translateX(-7%)}
  to {transform: translateX(0%)}
}
@keyframes slide_left {
  from {transform: translateX(7%)}
  to {transform: translateX(0%)}
}
@keyframes slide_down {
  from {transform: translateY(-7%)}
  to {transform: translateY(0%)}
}
@keyframes slide_up {
  from {
    transform: translateY(7%);
    opacity:0,
  }
  to {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes fade_in {
  from { 
    opacity: 0.2;
    transform: translateY(7%)
   }
  to { 
    opacity: 1;
    transform: translateY(0%)
  }
}
@keyframes fade_in_first {
  from { 
    opacity: 0.5;
   }
  to { 
    opacity: 1;
  }
}
@keyframes fade_in_first_reverse {
  from { 
    opacity: 1;
   }
  to { 
    opacity: 0.5;
  }
}

@media screen and (max-width:900px) {
  @keyframes slide_right {
    from {transform: translateX(-13%)}
    to {transform: translateX(0%)}
  }
  @keyframes slide_left {
    from {transform: translateX(13%)}
    to {transform: translateX(0%)}
  }
  @keyframes slide_down {
    from {transform: translateY(-13%)}
    to {transform: translateY(0%)}
  }
  @keyframes slide_up {
    from {
      transform: translateY(13%);
      opacity:0,
    }
    to {
      transform: translateY(0%);
      opacity: 1;
    }
  }

}

.zoomIn{
animation: zoom_in 1.4s;
}
.zoomOut{
animation: zoom_out 1.4s;
}
.slideInLeft{
animation: slide_left 1.5s;
animation-fill-mode: forwards;
}
.slideInRight{
animation: slide_right 1.5s;
animation-fill-mode: forwards;
}
.slideDown{
  animation: slide_down 1.5s;
  animation-fill-mode: forwards;
}
.slideUp{
  animation: slide_up 1.5s;
  animation-fill-mode: forwards;
}
.fadeIn{
  animation: fade_in 1.5s;
  animation-fill-mode: forwards;
}
.fade_in_first,
.fade_in{
  opacity: 0.5;
  transition: all ease-in-out 0.4s;
}
.fade_in_first{
  animation: fade_in_first_reverse 1.5s;
  animation-fill-mode: forwards;
  transition: all ease-in-out 0.4s;
}
.fadeInFirst{
  animation: fade_in_first 1.5s;
  animation-fill-mode: forwards;
  transition: all ease-in-out 0.4s;

}