/* Customization */
:root {
    --primarycolor: rgb(26,27,31); 
    --secondarycolor: rgb(255,255,255); 
    --gradientprimary: rgba(26,27,31); 
    --gradientsecondary: rgba(255,255,255);
}

/* Fluid font size variables, for browsers that support clamp */
@supports (font-size: clamp(1rem, 1vw, 1rem)) {
  :root {
    --font-size-sm: clamp(0.8rem, 0.15vw + 0.75rem, 0.89rem);
    --font-size-base: clamp(1rem, 0.32vw + 0.9rem, 1.19rem);
    --font-size-md: clamp(1.25rem, 0.57vw + 1.07rem, 1.58rem);
    --font-size-lg: clamp(1.56rem, 0.93vw + 1.27rem, 2.11rem);
    --font-size-xl: clamp(1.95rem, 1.46vw + 1.5rem, 2.81rem);
    --font-size-xxl: clamp(2.44rem, 2.23vw + 1.75rem, 3.75rem);
    --font-size-xxxl: clamp(3.05rem, 3.31vw + 2.02rem, 5rem);
  }
}
/* Fallback variables for browsers that don't support clamp */
@supports not (font-size: clamp(1rem, 1vw, 1rem)) {
  :root {
        --font-size-sm: 0.8rem;
            --font-size-base: 1rem;
            --font-size-md: 1.25rem;
            --font-size-lg: 1.56rem;
            --font-size-xl: 1.95rem;
            --font-size-xxl: 2.44rem;
            --font-size-xxxl: 3.05rem;
  }
  @media screen and (min-width: 1440px) {
    :root {
        --font-size-sm: 0.89rem;
                --font-size-base: 1.19rem;
                --font-size-md: 1.58rem;
                --font-size-lg: 2.11rem;
                --font-size-xl: 2.81rem;
                --font-size-xxl: 3.75rem;
                --font-size-xxxl: 5rem;
    }
  }
}





h1,
.fs-1 {
    font-size: var(--font-size-xxxl)!important;
}
h2,
.fs-2 {
    font-size: var(--font-size-xxl)!important;
}
h3,
.fs-3 {
    font-size: var(--font-size-xl)!important;
}
h4,
.fs-4 {
    font-size: var(--font-size-lg)!important;
}
h5,
.fs-5 {
    font-size: var(--font-size-md)!important;
}
h6,
.fs-6 {
    font-size: var(--font-size-base)!important;
}
a, p, ul, li, span, strong, label {
    font-size: var(--font-size-base)!important;
}
.fs-small {
    font-size: var(--font-size-sm)!important;
}

a,b,h2,h3,h4,h5,h6,li,p,span,strong,ul,label, *{
    font-family: 'Quicksand', sans-serif;
    text-decoration: none;
}

body {
    overflow-x: hidden;
    /*background: #FAFAFA;*/
/*    min-height: 10000px;*/
    transition: all 0.3s;
}

.b-none {
    border: none!important;
}

.lora {
    font-family: 'Lora', serif;
}

.p-equal-0 {
    padding: 0!important;
}
.box-shadow-none {
    box-shadow: none!important;
}
.cover-link {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
.vh-100 {
    height: 100vh;
    min-height: 100%;
}
.bg-center {
    background-position: center!important;
}
.bg-left-center {
    background-position: left center!important;
}
.bg-right-center {
    background-position: right center!important;
}
.bg-no-repeat {
    background-repeat: no-repeat!important;
}


header.navigation-wrapper * {
    color: #071c35;
}

header .custom-logo {
    letter-spacing: 6px;
}

header.navigation-wrapper {
    background: transparent;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 999;
}

header.navigation-wrapper:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(5px);
}
header.navigation-wrapper .navigation-inner {
    position: relative;
    z-index: 999;
}
.img-bg-circle {
    position: absolute;
    top: auto;
    bottom: 250px;
    right: 0;
    animation-name: rotate;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.img-bg-blue-circle {
    max-width: 260px;
    bottom: 100px;
    /*animation-direction: reverse;*/
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
} 






.color-whiteHar {
    background-color: #fff;
}
.color-pinkCutyptuty {
    background-color: #fef3f5;
}

.color-primeMed {
    background-color: #C8D6EB;
}
.color-himmah {
    background-color: #D9EEF4;
}
.color-rev {
    background-color: #F3E6FF;
}
.color-chhavi {
    background-color: #FFF1F9;
}
.color-saps {
    background-color: #F2F2F2;
}
.color-imed {
    background-color: #EDE9F8;
}
.color-colab {
    background-color: #EBFFFE;
}
.color-mobibank {
    background-color: #F3E6FD;
}
.color-trustfertility {
    background-color: #FFF4EA;
}
.color-burjeel {
    background-color: #F5EBF0;
}
.color-orthopedic {
    background-color: #F5EBF0;
}
.color-pixelhashing {
    background-color: #FAECF7;
}
.color-uniquevalet {
    background-color: #E5F5FF;
}
.color-manojre {
    background-color: #FFF5F5;
}
.color-vibe {
    background-color: #EDFFF5;
}
.color-wisdom {
    background-color: #FFEBEC;
}
.color-redribbon {
    background-color: #FFEDEF;
}
.color-ibece {
    background-color: #E0EDF9;
}
.color-squaremotion {
    background-color: #EDFBFF;
}









































.timeline-section {
  background: transparent;
  overflow: hidden;
}

.timeline {
  display: flex;
  flex-direction: column;
  padding: 60px 20px 0 37px;
  position: relative;
  perspective: 2000px;
}
@media (min-width: 768px) {
  .timeline {
    padding: 60px 20px 0;
  }
}
.timeline.is-init .timeline__wrap {
  padding: 30px;
  border-radius: 8px;
  background-color: white;
  box-shadow: 0px 10px 10px rgba(18, 18, 61, 0.05);
  opacity: 0;
  transform: translateX(100px) translateY(0) rotateX(35deg);
  will-change: opacity, transform;
  transition: transform 0.5s, opacity 0.2s;
}
.timeline.is-loading .timeline__line,
.timeline.is-loading .timeline__wrap,
.timeline.is-loading .timeline__footer {
  transition: none;
}
.timeline .is-visible .timeline__line {
  width: 100%;
}
.timeline .is-visible .timeline__wrap {
  opacity: 1;
}
.timeline .is-current .timeline__wrap {
  transform: translateX(0) translateY(0) rotateX(0deg) !important;
}
.timeline .is-above .timeline__wrap {
  opacity: 0.4;
  transform: translateX(0) translateY(-10%) rotateX(0deg) !important;
}

.timeline__track {
  width: 8px;
  height: 0;
  min-height: 0;
  max-height: 100%;
  background: #eee;
  position: absolute;
  border-radius: 0 0 100px 100px;
  top: 0;
  left: 30px;
  z-index: 2;
  transition: left 0.25s;
}
@media (min-width: 768px) {
  .timeline__track {
    left: 50%;
    transform: translateX(-50%);
  }
}
.timeline__track .timeline__circle {
  width: 30px;
  height: 30px;
  position: absolute;
  left: 50%;
  bottom: -15px;
  background: #212529;
  border-radius: 50%;
  transform: translateX(-50%);
  transform-style: preserve-3d;
  transition: all 0.3s ease-in-out;
}

.timeline__item {
  width: 100%;
  padding-top: 20px;
  margin-top: 120px;
  padding-left: 30px;
  position: relative;
}
@media (min-width: 768px) {
  .timeline__item {
    width: calc(50% + 2px);
    padding-left: 0;
  }
}
@media (min-width: 768px) {
  .timeline__item:nth-child(odd) {
    margin-right: auto;
    padding-right: 40px;
  }
  .timeline__item:nth-child(odd) .timeline__wrap {
    transform: translateX(-100px) translateY(0) rotateX(-35deg);
  }
}
@media (min-width: 768px) {
  .timeline__item:nth-child(even) {
    margin-left: auto;
    padding-left: 40px;
  }
}
.bullet-listing li {
    margin-left: 20px;
    margin-bottom: 20px;
    position: relative;
    font-size: var(--font-size-sm)!important;
}

.bullet-listing li:last-of-type {
    margin-bottom: 0px;
}

.bullet-listing li:before {
    content: '';
    height: 10px;
    width: 10px;
    background: #212529;
    border-radius: 50%;
    position: absolute;
    top: 9px;
    left: -20px;
}





.animateBar {
  animation-name: animateBar;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.9s;
}
@keyframes animateBar {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}


.footer-contact-details,
.sec-main,
.right-nav.xs-nav ul{
    position: relative;
    z-index: 2;
}
.xl-none {
    display: none;
}
.progress {
    height: 10px;
    border-radius: 10px;
}

.progress .progress-bar {
    background: #212529;
    border-radius: 10px;
}
.protfolio-link,
.protfolio-link:hover {
    text-decoration: underline;
    display: inline-block;
    margin-top: 30px;
    color: #212529;
}
.sec-saps-wrapper .protfolio-link,
.sec-saps-wrapper .protfolio-link:hover {
    color: #fff;
}

.copyright-wrapper * {color: #eee;font-size: 12px!important;}

.copyright-wrapper p {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.copyright-wrapper {
    position: relative;
}

.copyright-wrapper p a {
    text-decoration: underline;
}
header.navigation-wrapper .menu-trigger i {
    color: #fff;
}

.sec-all-portfolio {
    position: relative;
    /* filter: blur(5px); */
}

.sec-all-portfolio:before {}

.sec-all-portfolio .sec-all-portfolio-inner {
    filter: blur(0px)!important;
    position: relative;
    z-index: 2;
}

.sec-all-portfolio:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    opacity: 0.8;
}












@media only screen and (max-width: 500px) {
    .footer-contact-details .lora {
        font-size: 1.6rem!important;
    }
    header.navigation-wrapper {
        padding: 10px 0px;
    }
    .bg-left-center {
        background-size: 150% auto!important;
        background-position: top left!important;
    }
    .bg-right-center {
        background-size: 150% auto!important;
        background-position: top right!important;
    }
    .navigation-wrapper nav.xs-nav {
        background: #fff;
        padding-top: 60px;
    }

    .navigation-wrapper nav.xs-nav ul li a {
        color: #000;
        padding: 30px!important;
        font-size: 1.2rem!important;
    }
    .menu-close {
        background: #000;
        height: 50px;
        width: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
    }
    .xl-none {
        display: block;
    }
    .xs-none {
        display: none!important;
    }
    section .align-items-center {
        /*align-items: flex-end !important;*/
    }
}