@font-face {
    font-family: 'Nohemi ExtLt';
    src: url('../fonts/Nohemi-ExtraLight.eot');
    src: url('../fonts/Nohemi-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Nohemi-ExtraLight.woff2') format('woff2'),
        url('../fonts/Nohemi-ExtraLight.woff') format('woff'),
        url('../fonts/Nohemi-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nohemi';
    src: url('../fonts/Nohemi-Bold.eot');
    src: url('../fonts/Nohemi-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Nohemi-Bold.woff2') format('woff2'),
        url('../fonts/Nohemi-Bold.woff') format('woff'),
        url('../fonts/Nohemi-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nohemi Med';
    src: url('../fonts/Nohemi-Medium.eot');
    src: url('../fonts/Nohemi-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Nohemi-Medium.woff2') format('woff2'),
        url('../fonts/Nohemi-Medium.woff') format('woff'),
        url('../fonts/Nohemi-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nohemi';
    src: url('../fonts/Nohemi-Regular.eot');
    src: url('../fonts/Nohemi-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Nohemi-Regular.woff2') format('woff2'),
        url('../fonts/Nohemi-Regular.woff') format('woff'),
        url('../fonts/Nohemi-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nohemi SemBd';
    src: url('../fonts/Nohemi-SemiBold.eot');
    src: url('../fonts/Nohemi-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Nohemi-SemiBold.woff2') format('woff2'),
        url('../fonts/Nohemi-SemiBold.woff') format('woff'),
        url('../fonts/Nohemi-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}



@font-face {
    font-family: 'Nohemi';
    src: url('../fonts/Nohemi-ExtraBold.eot');
    src: url('../fonts/Nohemi-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Nohemi-ExtraBold.woff2') format('woff2'),
        url('../fonts/Nohemi-ExtraBold.woff') format('woff'),
        url('../fonts/Nohemi-ExtraBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Nohemi';
    src: url('../fonts/Nohemi-Light.eot');
    src: url('../fonts/Nohemi-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Nohemi-Light.woff2') format('woff2'),
        url('../fonts/Nohemi-Light.woff') format('woff'),
        url('../fonts/Nohemi-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Nohemi';
    src: url('../fonts/Nohemi-Black.eot');
    src: url('../fonts/Nohemi-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Nohemi-Black.woff2') format('woff2'),
        url('../fonts/Nohemi-Black.woff') format('woff'),
        url('../fonts/Nohemi-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nohemi';
    src: url('../fonts/Nohemi-Thin.eot');
    src: url('../fonts/Nohemi-Thin.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Nohemi-Thin.woff2') format('woff2'),
        url('../fonts/Nohemi-Thin.woff') format('woff'),
        url('../fonts/Nohemi-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@media (min-width: 1400px) {
    .container{
        max-width: 1440px;
    }
}

html,
select, {
  scrollbar-color: rgba(var(--clr-1), 1) transparent;
  scrollbar-width: thin;
}
::-webkit-scrollbar {
  width: 5px;
    background-color: #000;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
} 
::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #3D51A3 0%, #8286C1 98.12%);
}
::selection {
  color: #fff;
  background: #187FD3;
}
body,
select,
.discription ul {
  scrollbar-width: 5px;
  scrollbar-color: rgba(var(--clr-1), 1) transparent;
}
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: linear-gradient(90deg, #3D51A3 0%, #8286C1 98.12%);
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  font-family: 'Nohemi';
}
body {
  font-family: 'Nohemi';
  margin: 0;
  scroll-behavior: smooth;
}
a{
    transition: all 0.5s ease-in-out !important;
    text-decoration: none !important;
}
a:hover{
    transition: all 0.5s ease-in-out !important;
    color: #8286c1;
}
ul{
  padding: 0;
  margin: 0;
  list-style: none;
}
p{
    font-size: 16px;
    line-height: 24px;
    margin: 0;
}
.clr-p{
    color: #262626;
}
.para-spacing{
    letter-spacing: 3px;
}
/*==================
    COLOR-CODE
===================*/
.text-gradient{
    background: linear-gradient(180deg, #8286C1 80.29%, #3D51A3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
.clr-light{
    color: #ffffff;
}
.clr-dark{
    color: #131028;
}
.clr-blue{
    color: #002868;
}
.clr-gray{
    color: #8D8D8D;
}
.bg-purple{
    background: #CFD2FF;
}
.bg-dark{
    background: #131028 !important;
}
.gradient-bg{
    background: linear-gradient(90deg, #3D51A3 0%, #8286C1 98.12%);
}
.btn-dark-text{
    color: #131028;
}
.bg{
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
.letter-space{
    letter-spacing: 1.1px;
}
/*==================
    FONT-SIZES
===================*/
.ft-14{
    font-size: 14px;
}
.ft-15{
    font-size: 15px;
}
.ft-16{
    font-size: 16px !important;
}
.ft-18{
    font-size: 18px;
}
.ft-26{
    font-size: 26px;
    line-height: 36px;
}
.ft-30{
    font-size: 30px;
}
.ft-40{
    font-size: 40px;
    line-height: 60px;
}
.ft-44 {
    font-size: 44px;
}
/*==================
    FONT-WEIGHT
===================*/
.fw-regular{
    font-weight: 400;
}
.fw-med{
    font-weight: 500;
}
.fw-semi{
    font-weight: 600;
}
.fw-bold{
    font-weight: 700;
}
.fw-exbold{
    font-weight: 800;
}
/*==================
        SPACING
===================*/
.padding-80{
    padding-top: 80px;
    padding-bottom: 80px;
}
.padding-100{
    padding-top: 100px;
    padding-bottom: 100px;
}
.top_space {
    padding-top: 60px;
}
.pt-100{
    padding-top: 100px;
}
.pb-100{
    padding-bottom: 100px;
}
.pt-150{
    padding-top: 150px;
}
.mt--10 {
    margin-top: -372px;
}
/*==================
    STICKY-CARDS
===================*/
.sticky_card {
  box-sizing: border-box;
  position: sticky;
  padding-top: 50px;
  padding-bottom: 50px;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
}
.sticky_card.one {
  top: 50px;
}
.sticky_card.two {
  top: 80px;
}
.sticky_card.three {
  top: 110px;
}
.sticky_card.four {
  top: 140px;
}
.sticky_card.five {
  top: 170px;
  border-radius: 40px;
}
.sticky_card ul,
.Service_sec-01 ul {
    display: block;
    column-count: 2;
}
.Service_sec-01 ul {
    width: fit-content;
}
.sticky_card ul li,
.Service_sec-01 ul li {
    line-height: 35px;
    font-size: 16px;
}
.sticky_card p,
.Servive_detail-sec p {
    letter-spacing: 2px;
}
/*=========== CSS-KEYFRAMES ==========*/
@keyframes port1{
0%{
   transform: translatey(0px);
}
50%{
   transform: translatey(-20px);
}
100%{
   transform: translatey(0px);
}
}
.an-portfolio-slider .item:nth-child(even) {
animation: port2 5s linear infinite;
}
@keyframes port2{
0%{
 transform: translatey(0px);
}
50%{
 transform: translatey(20px);
}
100%{
 transform: translatey(0px);
}
}
@keyframes trin {

    from {
        transform:rotate3d(0, 0, 1, 0deg);
    }
    20%, 32%, 44%, 56%, 68% {
        transform: rotate3d(0, 0, 1, 0deg);
    }
    23%, 35%, 47%, 59%, 71% {
        transform: rotate3d(0,0,1,15deg);
    }
    26%, 38%, 50%, 62%, 74% {
        transform: rotate3d(0,0,1,0deg);
    }
    29%, 41%, 53%, 65%, 77% {
        transform: rotate3d(0,0,1,-15deg);
    }
    80% {
        transform:rotate3d(0, 0, 1, 0deg);
    }

}
@-webkit-keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-20px);
  }
  100% {
    transform: translatey(0px);
  }
}
@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-20px);
  }
  100% {
    transform: translatey(0px);
  }
}

.trin-trin
{
    animation-name: trin;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    font-size: 20px !important;
    margin-left: 0 !important;
    margin-right: 5px;
}
@keyframes trin {

    from {
        transform:rotate3d(0, 0, 1, 0deg);
    }
    20%, 32%, 44%, 56%, 68% {
        transform: rotate3d(0, 0, 1, 0deg);
    }
    23%, 35%, 47%, 59%, 71% {
        transform: rotate3d(0,0,1,15deg);
    }
    26%, 38%, 50%, 62%, 74% {
        transform: rotate3d(0,0,1,0deg);
    }
    29%, 41%, 53%, 65%, 77% {
        transform: rotate3d(0,0,1,-15deg);
    }
    80% {
        transform:rotate3d(0, 0, 1, 0deg);
    }

}