@font-face {
    font-family: Inter;
    src: url(../font/Inter/static/Inter_24pt-Regular.ttf);
}
@font-face {
    font-family: Inter-Light;
    src: url(../font/Inter/static/Inter_18pt-ExtraLight.ttf);
}
@font-face {
    font-family: Inter-Thin;
    src: url(../font/Inter/static/Inter_18pt-Thin.ttf);
}
@property --srcoll-bg-size {
    syntax: '<length-percentage>';
    inherits: true;
    initial-value: 100%;
}
:root {
    --primary: #2ac0d5;
    --primary1: #2ac1d51f;
    --secondary: #006B5F;
    --dark-primary: #020b0c;
    --dark-primary1: #020b0c3f;
    font-family: Inter;
}
*{box-sizing: border-box;}
/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
}
 
::-webkit-scrollbar-track {
    background-color: var(--dark-primary);
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: linear-gradient(var(--dark-primary), var(--primary), var(--dark-primary)) center;
    background-size: 100% var(--srcoll-bg-size);
    /* filter: drop-shadow(0 0 10px #2ac0d5); */
    /* transition: all 1s; */
}
/* html{scroll-behavior: smooth;} */
body{ 
    margin: 0;
    background: 
      /* radial-gradient(
          var(--dark-primary),
          black
      ) */
      black
      fixed
      no-repeat
    ;
    background-image: 
      radial-gradient(
        circle at -20% 100%,
        var(--primary1) 0%,
        transparent 40%
      ),
      radial-gradient(
        circle at 120% 0,
        var(--primary1) 0%,
        transparent 40%
      )
    ;
    color: white;
    transition: --srcoll-bg-size 1s;
}
body:hover {
  --srcoll-bg-size: 200%;
  transition: --srcoll-bg-size 0.3s;
}
nav{
    position: sticky;
    z-index: 1000;
    inset: 0;
    overflow: hidden;
    .nav-container{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        background-color: rgba(0,0,0,0);
        animation: onLoadNav 1s;
        >.nav-background{
          position: absolute;
          inset: 0;
          z-index: -1;
          backdrop-filter: blur(20px);
        }
        .site-logo{
            >a>img{
                height: 80px;
            }
        }
        .nav-btn-area{
            display: flex;
            letter-spacing: 3px;
            justify-content: center;
            flex: 1 100%;
            gap: 3%;
            .nav-btn>a{
                color: white;
                text-decoration: none;
                font-family: Inter-Light;
                font-weight: 100;

                &:hover, &.active{
                    color: var(--primary);
                    font-weight: 600;
                }
            }
            &.nav-area-open{
              position: fixed;
              top: 100px;
              right: 0;
              height: calc(100vh - 100px);
              width: 250px;
              flex-direction: column;
              background-color: rgba(0,36,66,0.5);
              backdrop-filter: blur(100px);
              padding: 20px;
              justify-content: start;
              animation: navAnimation 0.5s linear;
            }
        }
        .nav-menu{
            display: flex;
            gap: 10px;
            button{
            background-color: transparent;
            border: 0;
            color: white;
            width: 40px;
            line-height: 35px;
            border-radius: 20px;
            &:hover{
              background-color: rgba(255,255,255,0.1);
            }
          }
        }
    }
}
.nav-social{
  display: flex;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50px;
  >a{
    text-decoration: none;
    color: white;
    width: 35px;
    line-height: 35px;
    border-radius: 20px;
    text-align: center;
    &:hover{
      background-color: rgba(255,255,255,0.1);
      .fa-facebook-f{
        color: #1974ec;
      }
      .fa-linkedin-in{
        color: #0a63bd;
      }
      .fa-youtube{
        color: #f70000;
      }
    }
  }
}
@keyframes onLoadNav {
  0%{transform: scaleX(1.2) translateY(-100px);}
  100%{transform: scaleX(1) translateY(0);}
}
@keyframes navAnimation {
  0%{transform: translateX(100%);}
  100%{transform: translateX(0);}  
}
.blob{
    position: fixed;
    inset: 0 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    
    animation: 
      entryBlob 2s;
}
.group-1{
  /* scale: 0.4; */
  transition: translate 0.5s;
  transform: translate(30%, 0) scale(0.6) rotateZ(180deg);
  transform-origin: center;
  g{
      .logoSVG{
        opacity: 0;
        animation: circleUpDown 8s infinite;
        &.second{
          animation-delay: 0.3s;
        }
      }
      .blob-shape{
        transition: all 0.1s;
        transform-origin: center;
        animation: morphBlob 10s infinite linear;
      }
      .blob-shape1{
        transform-origin: center;
        opacity: 0;
      }
      .blob-shape2{
        transform-origin: center;
        opacity: 0;
      }
    }
  }
@keyframes circleUpDown {
  0%,100%{transform: translateY(-2.5%);}
  50%{transform: translateY(2.5%);}
}
@keyframes entryBlob {
  0%{opacity: 0;}
  100%{opacity: 1;}
}
@keyframes morphBlob {
  0%,100%{
    d: path("M843.61 696.89c-219.69,126.15 -226.7,264.7 -432.11,242.33 -197.76,-21.54 -314.41,-234.62 -349.82,-355.97 -23.38,-80.14 -9.16,-223.15 74.62,-345.25 44.71,-65.17 187.49,-213.28 374.93,-173.88 164.99,34.67 160.73,143.43 288.28,178.33 201.37,55.11 191.59,369.75 44.1,454.44z");
  }
  25%{
    d: path("M801.35 764.51c-219.69,126.15 -184.44,197.08 -389.85,174.71 -197.76,-21.54 -318.19,-166.88 -353.2,-288.35 -56.51,-196.11 9.53,-320.89 106.74,-395.97 62.55,-48.3 158.75,-230.17 346.19,-190.78 164.98,34.67 309.1,90.13 364.82,210.05 93.18,200.49 72.78,405.66 -74.7,490.34z");
  }
  50%{
    d: path("M747.25 795.72c-219.68,126.15 -240.23,148.96 -445.63,126.59 -197.76,-21.53 -233.75,-145.39 -243.32,-271.44 -15.22,-200.43 43.36,-339.27 159.2,-449.84 57.17,-54.56 178.99,-177.99 366.43,-138.6 164.98,34.66 227.94,191.57 283.67,311.48 93.17,200.49 27.13,337.13 -120.35,421.81z");
  }
  75%{
    d: path("M883.91 656.26c-90.44,98.79 -271.77,233.57 -472.41,282.96 -236.42,58.2 -350.59,-183.61 -350.29,-378.61 0.13,-83.48 9.66,-229.61 93.45,-351.71 44.71,-65.17 169.12,-184.18 356.57,-144.78 164.99,34.67 293.2,124.26 340.57,180.08 135.09,159.18 146.96,286.61 32.11,412.06z");
  }
  /* 0%,100%{
    d: path("M809.5,677.5Q705,855,478,893.5Q251,932,160,716Q69,500,199.5,353Q330,206,453,287.5Q576,369,745,434.5Q914,500,809.5,677.5Z");
  }
  25%{
    d: path("M744.5,615.5Q633,731,466.5,788.5Q300,846,234,673Q168,500,246,348Q324,196,488.5,215Q653,234,754.5,367Q856,500,744.5,615.5Z");
  }
  50%{
    d: path("M763.5,689.5Q719,879,512.5,857.5Q306,836,184.5,668Q63,500,199,356.5Q335,213,522,175.5Q709,138,758.5,319Q808,500,763.5,689.5Z");
  }
  75%{
    d: path("M766,694Q724,888,502,884Q280,880,179.5,690Q79,500,198,342Q317,184,488.5,203Q660,222,734,361Q808,500,766,694Z");
  } */
}
@keyframes morphBlob0 {
  0%,100%{
    d: path("M799.38 906.94c-109.65,84.29 -211.98,60.39 -270.6,25.84 -34.67,-20.43 -145.28,-100.43 -152.15,-202.62 -5.61,-83.44 -13.53,-153.68 67.36,-221.17 60.8,-50.73 161.02,-74.97 219.11,-62.31 77.24,16.84 149.8,83.92 194.06,142.41 98.79,130.55 62.92,225.05 -57.78,317.85z");
  }
  25%{
    d: path("M789.21 881.53c-164.06,83.37 -276.27,95.14 -324.66,47.31 -60.07,-59.39 -48.87,-110.04 -55.73,-212.23 -5.61,-83.44 -11.84,-146.91 69.05,-214.4 60.8,-50.72 118.68,-46.16 176.76,-33.51 77.23,16.84 145.88,38.36 190.14,96.85 98.78,130.55 80.17,247 -55.56,315.98z");
  }
  50%{
    d: path("M762.48 933.47c-63.75,34.15 -217.61,43.19 -265.99,-4.64 -60.07,-59.39 -113.93,-110.16 -120.79,-212.34 -5.6,-83.44 56.86,-102.75 137.75,-170.24 60.79,-50.72 122.03,-103 180.11,-90.34 77.24,16.83 106.95,51.16 151.21,109.64 98.78,130.54 51.91,296.03 -82.29,367.92z");
  }
  75%{
    d: path("M799.38 906.94c-109.66,84.29 -244.27,56.44 -302.89,21.89 -34.66,-20.43 -112.99,-96.48 -119.86,-198.67 -5.61,-83.44 20.35,-160.46 101.24,-227.95 60.8,-50.72 127.14,-68.19 185.23,-55.53 77.24,16.84 117.81,32.19 162.08,90.68 98.78,130.55 94.91,276.78 -25.8,369.58z");
  }
}
@keyframes morphBlob1 {
  0%,100%{
    d: path("M694.97 268.31c-6.84,3.86 -69.86,21.98 -109.38,-12.5 -14.79,-12.9 -40.57,-48.88 -33.3,-100.19 4.55,-32.11 13.29,-48.32 44.03,-68.25 63.51,-41.16 101.6,-15.89 126.16,-0.49 38.83,24.37 66.53,101.2 23.75,144.62 -23.32,23.66 -25.54,22.31 -51.26,36.81z");
  }
  25%{
    d: path("M694.97 268.31c-6.84,3.86 -73.11,18.92 -112.64,-15.55 -14.78,-12.9 -28.88,-37.41 -21.61,-88.72 4.54,-32.1 -4.98,-62.29 25.76,-82.22 63.5,-41.15 104.32,-4.51 128.87,10.89 38.83,24.36 76.25,88.52 33.47,131.94 -23.31,23.66 -28.14,29.17 -53.85,43.66z");
  }
  50%{
    d: path("M679.97 263.32c-6.83,3.84 -48.33,22.54 -82.74,-17.04 -17,-19.56 -23.99,-39.76 -39.81,-84.23 -10.86,-30.54 5.01,-73.29 39.25,-86.28 58.97,-22.37 112.38,10.05 136.93,25.45 38.82,24.36 46.99,74.83 4.2,118.25 -23.3,23.66 -32.12,29.35 -57.83,43.85z");
  }
  75%{
    d: path("M666.25 254.99c-6.82,3.84 -50.29,26.95 -84.69,-12.63 -17,-19.56 -8.32,-35.85 -24.14,-80.31 -10.86,-30.54 14.06,-91.67 59.64,-86.27 84.84,10.04 98.65,13.62 119.15,34.1 22.24,22.22 21.73,78.11 2.91,124.62 -12.46,30.78 -47.16,6 -72.87,20.49z");
  }
}
@keyframes morphBlob2 {
  0%,100%{
    d: path("M314.75 511.47c-55.43,18.54 -128.16,25.1 -194.45,-32.72 -24.79,-21.63 -65.19,-67.26 -53,-153.33 7.63,-53.83 36.11,-82.69 87.66,-116.1 106.5,-69.03 156.99,-40.58 197.14,-13.17 48.38,33.02 84.09,139.52 76.16,182.86 -10.04,54.79 -43.02,108.87 -113.51,132.46z");
  }
  25%{
    d: path("M291.46 497.81c-55.42,18.55 -104.87,38.75 -171.16,-19.06 -24.79,-21.63 -45.57,-61.68 -33.38,-147.74 7.63,-53.83 7.18,-94.59 58.73,-128 106.5,-69.02 185.58,-0.54 225.72,26.86 48.38,33.03 56.8,130.54 48.86,173.89 -10.03,54.78 -58.28,70.47 -128.77,94.05z");
  }
  50%{
    d: path("M299.09 516.22c-86.46,6.1 -126.78,-22.02 -160.94,-53.95 -40.77,-38.11 -81.87,-82.33 -29.79,-151.91 34.69,-46.36 59.35,-61.6 97.01,-94.85 119.25,-105.28 189.41,17.56 204.21,63.85 14.24,44.55 17.25,88.07 12.39,111.36 -14.61,70.03 -75.94,122.19 -122.88,125.5z");
  }
  75%{
    d: path("M291.46 497.81c-55.42,18.55 -104.87,38.75 -171.16,-19.06 -24.79,-21.63 -45.57,-61.68 -33.38,-147.74 7.63,-53.83 7.18,-94.59 58.73,-128 106.5,-69.02 185.58,-0.54 225.72,26.86 48.38,33.03 56.8,130.54 48.86,173.89 -10.03,54.78 -58.28,70.47 -128.77,94.05z");
  }
}
.primary-btn{
  text-decoration: none;
  border: 1px solid white;
  border-radius: 50px;
  padding: 10px 25px;
  color: white;
  transition: 0.3s all;
  &.fill-btn{
    background-color: white;
    color: black;
  }
  &:hover{
    background-color: white;
    color: black;
  }
}
section {
  &.section-hero{
    min-height: calc(100vh - 100px);
    display: flex;
    justify-content: center;
    align-items: center;
    >div{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(10px, 6vw, 80px);;
      text-align: center;
      max-width: 890px;
      h1, p{ font-weight: unset; margin: 0;}
      h1{font-size: clamp(2rem, 3vw, 4rem);}
      p{font-size:  clamp(1rem, 2vw, 2rem);font-family: Inter-Thin;}
    }
  }
  &.section-service{
    min-height: calc(100vh - 100px);
    padding-top: 50px;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    .serviceSide{
      transition: all 0.3s;
    }
    h1{
      text-align: center;
      font-size: clamp(1.5rem, 3vw, 3rem);
      font-family: Inter-Light;
    }
    h2{
      font-size: clamp(1rem, 2vw, 1.5rem);
    }
    p{
      font-size: clamp(0.8rem, 2vw, 1.3rem);
      font-family: Inter-Thin;
      line-height: clamp(20px, 4vw, 35px);
    }
    .serviceCounter{
      padding: 20px 20px 20px;
      background-color: var(--primary1);
      backdrop-filter: blur(20px);
      border-radius: 50px;
      p{
        text-align: center;
        font-size: clamp(0.5rem, 4vw, 1rem);
        line-height: unset;
      }
    }
  }
  &.section-video{
    height: calc(100vh - 100px);
    background: no-repeat center linear-gradient(#2ac0d5, #006B5F);
    background-size: 100% 170%;
    /* transform: scale(0.1, 0.22); */
    /* transform-origin: top center; */
    border-radius: 0 0 40px 40px;
    clip-path: circle(10% at 50% 16%);
    overflow: hidden;
    /* transition: all 0.1s; */
    video{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  &.section-team{
    padding-top: 50px;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    h1{
      text-align: center;
      font-size: 3rem;
      font-family: Inter-Light;
    }
    .team-bubble{
      min-height: calc(100vh - 300px);
      width: 100%;
      .team-bubble-img{
        border-radius: 500px;
        background-color: var(--primary);
        position: absolute;
        overflow: hidden;
        transform: translate(-50%, 0%);
        animation: teamBubbles 1s;
        transform-origin: left center;
        transition: all 0.3s;
        &:hover{
          transform-origin: center;
          transform: translate(-50%, 0%) scale(1.1);
        }
        >img{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
  &.footer{
    border-radius: 40px 40px 0 0;
    background-color: var(--dark-primary);
    background: no-repeat center linear-gradient(90deg, var(--dark-primary), var(--secondary) 180%);
    padding: 10px 0;
    font-family: Inter-Light;
    h3{
      font-family: Inter-Light;
      font-weight: normal;
    }

  }
  &.services{
    h1{
      font-family: Inter-Thin;
      font-size: clamp(1.5rem, 4vw, 3rem);
    }
    .quote{
      font-family: Inter-Light;
      letter-spacing: 3px;
    }
    p{
      font-family: Inter-Light;
      letter-spacing: 1px;
    }
  }
  &.portfolio{
    font-family: Inter-Thin;
    h1{
      font-size: clamp(1.5rem, 4vw, 3rem);
    }
    .portfolio-cards{
      width: 100%;
      .imgView{
        overflow: hidden;
        border-radius: 25px;
        background: linear-gradient(45deg, var(--dark-primary1), var(--primary));
        padding-top: 100%;
        position: relative;
        img{
          position: absolute;
          transition: all 0.5s;
          top: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          &:hover{transform: rotate(-10deg) scale(1.2);}
        }
        
      }
      &.clickable-cards{
        cursor: pointer;
      }
    }
  }
}
.myfilter-btn-list{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center; 
  button{
    border: 0;
    background-color: var(--dark-primary);
    color: white;
    border-radius: 50px;
    padding: 10px 20px;
    &:hover{
      background-color: var(--primary1);
    }
  }
  .active{
    background-color: var(--primary) !important;
  }
}
.myfilter-btn-list1{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center; 
  button{
    border: 0;
    background-color: var(--dark-primary);
    color: white;
    border-radius: 50px;
    padding: 10px 20px;
    &:hover{
      background-color: var(--primary1);
    }
  }
  .active{
    background-color: var(--primary) !important;
  }
}
.text-truncate{
  text-overflow: ellipsis;
  text-wrap: no-wrap;
}
.text-right{text-align: right;}
.text-center{text-align: center;}
.text-title{
  font-family: Inter-Light !important;
  font-size: clamp(2rem, 4vw, 3.5rem) !important;
  color: var(--primary);
}
@keyframes teamBubbles {
  0%{transform: scale(0) translate(-50%, 0%);}
  100%{transform: scale(1) translate(-50%, 0%);}
}