body, html{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    hyphens: none;
}

@font-face {
    font-family: 'Montserrat-regular';
    src: url('../../assets/fonts/Montserrat-Regular.ttf') format("truetype");
  }


@font-face {
    font-family: 'Montserrat-medium';
    src: url('../../assets/fonts/Montserrat-Medium.ttf') format("truetype");
  }

@font-face {
    font-family: 'Montserrat-bold';
    src: url('../../assets/fonts/Montserrat-Bold.ttf') format("truetype");
  }


 
:root {
    --primary-color: #fc3a5154;
    --tertiary-color: #1c1b20;
    --secondary-color: #f6ecdd;
    --image-bg-color: #dbdbdb;
  }



*,
:before,
:after {
  box-sizing: border-box;
}

.center-h-v {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.center-h {
  position: absolute;

  left: 50%;
  transform: translate(-50%);
}

.center-v {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}

h1{
    font-family: 'Montserrat-bold';
}

h2{
    font-family: 'Montserrat-medium';
}
h3{
    font-family: 'Montserrat-regular';
}
p{
    font-family: 'Montserrat-regular';
}


.loader-frame{
  width: 100px;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  position: absolute;
}

.loader{
  width: 100px;
  height: 100px;
  border-radius: 100%;
  position: relative;
  margin: 0 auto;
}

#loader-4 span{
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: #3498db;
  margin: 35px 5px;
  opacity: 0;
}

#loader-4 span:nth-child(1){
  animation: opacitychange 1s ease-in-out infinite;
}

#loader-4 span:nth-child(2){
  animation: opacitychange 1s ease-in-out 0.33s infinite;
}

#loader-4 span:nth-child(3){
  animation: opacitychange 1s ease-in-out 0.66s infinite;
}

@keyframes opacitychange{
  0%, 100%{
    opacity: 0;
  }

  60%{
    opacity: 1;
  }
}