* {
  font-family: "Prompt";
}
:root{
  --animationTime:200ms;

  }
.bg-t1 {
    background-color: wheat;
  }
  .rounded-end-4 {
    border-top-right-radius: var(--bs-border-radius-xl)!important;
    border-bottom-right-radius: var(--bs-border-radius-xl)!important;
}
.cover{
  background-size: cover;
}
  .box-s {
    box-shadow: rgba(0, 0, 0, 0.07) 0px 10px 36px 0px,
      rgba(0, 0, 0, 0.025) 0px 0px 0px 1px;
  }
  .pointer{
    cursor: pointer;
  }
  .box-c{
    transition: all 0.2s ;
    cursor: pointer; 
  }
  .box-c:hover{
    transform: scale(1.05);
  }
  .bg-default {
    background: #3c4c6a;
  }

  .d {
    display: flex;
  }

  .dr {
    display: flex;
    flex-direction: row;
  }

  .dc {
    display: flex;
    flex-direction: column;
  }

  .nav-animation-out {
    transition: all 200ms cubic-bezier(0, 0.29, 0, 0.92);
  }

  .nav-animation-out::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    height: 100%;
    z-index: 2;
    background-color: black;
  }

  .nav-animation-out::before:hover {
    width: 10px;
  }

  .nav-animation {
    transition: all 200ms cubic-bezier(0, 0.29, 0, 0.92);
    cursor: pointer;

  }

  .nav-animation-out:hover {
    background-color: white !important;
  }

  .nav-animation::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0px;
    transition: all 200ms cubic-bezier(0, 0.29, 0, 0.92);
    width: 5px;
    border-radius: 30px;
    height: 100%;
    z-index: 2;
    background-color: black;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }
  .nav-animation-out::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0px;
    transition: all 200ms cubic-bezier(0, 0.29, 0, 0.92);
    width: 0px;
    border-radius: 30px;
    height: 100%;
    z-index: 2;
    background-color: black;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }
  .nav-animation-out{
    transition: all 200ms;
    cursor: pointer;
  }
  .nav-animation-out-d{
    transition: all 300ms;
    cursor: pointer;

  }
  .nav-animation-out-d:hover {
    background-color: #dc3545!important;
    color: white;
  }
  .nav-animation-out-d:hover::before {
    width: 5px;
  }
  .nav-animation-out-d::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0px;
    transition: all 200ms cubic-bezier(0, 0.29, 0, 0.92);
    width: 0px;
    border-radius: 30px;
    height: 100%;
    z-index: 2;
    background-color: black;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }

  .nav-animation-out:hover::before {
    width: 5px;
  }
  .box-a1-animation:hover {
    transition: all 250ms;
    background-color: white;
    color: black;
    transform: scale(1.01);
}
.box-a1-animation{
    transition: all 250ms;
    background-color: #181818;
    color: white; 
    position: relative;
    overflow: hidden;
}
.box-a1-animation::after{
    content: '';
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    top: -40px;
    right:  -40px;
    transition: all 250ms;
    background-color: white;

}
.box-a1-animation:hover::after{
    top: 70%;
    background-color: black;
}
.animation-btn-class-1{
  background-color: #181818;
  position: relative;
  color: white;
  transition: all 300ms;
  cursor: pointer;
}
.animation-btn-class-1:hover{
  background-color: white;
  color: #181818;
}
.animation-btn-class-1::after{
  content: '';
  width: 100%;
  height: 100%;
  
  position: absolute;
  border-radius: 20px;
  top: 0;
  left: 0;z-index: -1;
  background-color: #181818;
  transition: all 300ms;
  color: white;
}.animation-btn-class-1:hover:after{
  content: '';
  width: calc(100% + 20px);
  height:calc( 100% + 20px);
  position: absolute;
  top: -10px;
  left: -10px;z-index: -1;
  background-color: #181818;
  color: white;
}

  .animation-slide{
    animation-name: animation-slide;
    animation-duration: var(--animationTime);
    animation-timing-function: cubic-bezier(0, 0, 0, 1.01);
  }
  @keyframes animation-slide {
    0%{
      transform: translateX(-10vw);
      opacity: 0;
    }
    100%{
      opacity: 1;
      transform: translateX(0);
    }
  }
  
    *{
      font-family: 'Mitr';
    }
    .pointer{
      cursor: pointer;
    }
    .pointer {
    transition: all 250ms;
    cursor: pointer;
    border: 1px solid white;
  }
  .pointer:hover{
    background-color: white !important;
    color: rgb(255,193,7) !important;
    border: 1px solid rgb(255,193,7);
  }
  @media screen and (max-width: 1024px) {
  .t {
   font-size: 26px !important;
}
.t2 {
   font-size: 70px !important;
}
.pre{
  display: none !important;
}
}
    @media screen and (min-width: 1024px) {
.t {
   font-size: 26px !important;
}
.t2 {
   font-size: 70px !important;
}
.pre{
  display: flex !important;
}
}