@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');






    .roboto_txt {
      font-family: "Roboto Flex", sans-serif;

    }

    body {
      font-family: "Montserrat", sans-serif;
    }

    .dm_sans {
      font-family: "DM Sans", sans-serif;
    }

    .inter {
      font-family: "Inter", sans-serif;
    }

    .icon-minus.hidden,
    .icon-plus.hidden {
      display: none !important;
    }

    @media (max-width: 767px) {
      .story_section {
        background-image: none !important;
      }
    }




    .swiper-button-next:after,
    .swiper-button-prev:after {
      font-family: swiper-icons;
      font-size: var(--swiper-navigation-size);
      text-transform: none !important;
      letter-spacing: 0;
      font-variant: initial;
      line-height: 1;
      display: none;
    }

    .swiper-button-next,
    .swiper-button-prev {
      opacity: 0;
      background-color: black;

    }

    .swiper:hover .swiper-button-next,
    .swiper:hover .swiper-button-prev {
      opacity: 1;
      border-radius: 50%;
      transition: opacity 0.3s ease, background-color 0.3s ease;

      width: 30px;
      height: 30px;
      color: white;
      font-size: 14px;
    }


    .story_section {
      background-image: url('../images/bg_blue.png');
      background-size: contain;
      /* show full image */
      background-repeat: no-repeat;
      background-position: right;
      width: 100%;
    }


    .swiper-slide-thumb-active .thumb-item {
      border: 2px solid #BDBDBD;
    }


    .glitch-btn {
      position: relative;
      overflow: hidden;
    }

    .glitch-btn::before,
    .glitch-btn::after {
      content: "Contact Us";
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
      top: 0;
      opacity: 0;
      transition: 0.2s;
    }

    .glitch-btn::before {
      left: 2px;
      text-shadow: -2px 0 #00eaff;
    }

    .glitch-btn::after {
      left: -2px;
      text-shadow: -2px 0 #ff3c3c;
    }

    .glitch-btn:hover::before,
    .glitch-btn:hover::after {
      opacity: 1;
      animation: glitch 0.3s infinite;
    }

    @keyframes glitch {
      0% {
        clip-path: inset(0 0 80% 0);
      }

      20% {
        clip-path: inset(10% 0 60% 0);
      }

      40% {
        clip-path: inset(40% 0 20% 0);
      }

      60% {
        clip-path: inset(20% 0 40% 0);
      }

      80% {
        clip-path: inset(60% 0 10% 0);
      }

      100% {
        clip-path: inset(0 0 80% 0);
      }
    }


    .reveal-img {
      opacity: 0;
      transform: translateY(-100px);
      transition: all 0.8s ease-out;
    }

    .reveal-img.active {
      opacity: 1;
      transform: translateY(0);
    }


    .text-group>* {
      opacity: 0;
      transform: translateY(25px);
      transition: all 0.6s ease-out;
    }

    .text-group.active>* {
      opacity: 1;
      transform: translateY(0);
    }

    /* delay for each element */
    .text-group.active>*:nth-child(1) {
      transition-delay: 0.1s;
    }

    .text-group.active>*:nth-child(2) {
      transition-delay: 0.25s;
    }

    .text-group.active>*:nth-child(3) {
      transition-delay: 0.4s;
    }


    .hover-shine {
      position: relative;
      overflow: hidden;
    }

    .hover-shine::before {
      content: "";
      position: absolute;
      top: 0;
      left: -150%;
      width: 60%;
      height: 100%;
      background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.6), transparent);
      transform: skewX(-20deg);
      transition: 0.8s;
    }

    .hover-shine:hover::before {
      left: 150%;
    }


    @keyframes iconShow {
      0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
      }

      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes drawFill {
      0% {
        opacity: 0;
      }

      60% {
        opacity: 0;
      }

      100% {
        opacity: 0.5;
      }
    }

    @keyframes fade {
      to {
        opacity: 0.5;
      }
    }



    /* smooth base transition */
    .social-icons a {
      transition: background-color 0.3s ease, transform 0.35s ease;
    }

    .social-icons a i {
      transition: color 0.3s ease, transform 0.35s ease;
    }

    /* hover effect */
    .social-icons a:hover {
      background-color: #DC6054;
      transform: translateY(-4px);
      /* subtle lift */
    }

    .social-icons a:hover i {
      color: #ffffff;
      transform: scale(1.15) rotate(5deg);
      /* smooth + premium */
    }



    .arrow-js-animate {
      will-change: transform, opacity;
      transition: filter 0.3s ease;
    }

    .arrow-js-animate:hover {
      filter: drop-shadow(0 6px 14px rgba(0, 70, 127, 0.35));
    }


    /* Container animations - fade in whole header */
    .header-container {
      opacity: 0;
      animation: fadeIn 1.2s ease-out forwards;
    }

    /* Title: Letters appear one by one with slight upward slide */
    .title-text {
      display: inline-block;
    }

    .title-text span {
      display: inline-block;
      opacity: 0;
      transform: translateY(60px);
      animation: letterUp 0.4s ease-out forwards;
    }

    .title-text span:nth-child(1) {
      animation-delay: 0.1s;
    }

    .title-text span:nth-child(2) {
      animation-delay: 0.2s;
    }

    .title-text span:nth-child(3) {
      animation-delay: 0.3s;
    }

    .title-text span:nth-child(4) {
      animation-delay: 0.4s;
    }

    .title-text span:nth-child(5) {
      animation-delay: 0.5s;
    }

    .title-text span:nth-child(6) {
      animation-delay: 0.6s;
    }

    .title-text span:nth-child(7) {
      animation-delay: 0.7s;
    }

    .title-text span:nth-child(8) {
      animation-delay: 0.8s;
    }

    .title-text span:nth-child(9) {
      animation-delay: 0.9s;
    }

    .title-text span:nth-child(10) {
      animation-delay: 1.0s;
    }

    .title-text span:nth-child(11) {
      animation-delay: 1.1s;
    }

    .title-text span:nth-child(12) {
      animation-delay: 1.2s;
    }

    .title-text span:nth-child(13) {
      animation-delay: 1.3s;
    }

    /* Subtitle + Icon container: Slide in from left after title */
    .subtitle-container {
      opacity: 0;
      transform: translateX(-50px);
      animation: slideInLeft 1s ease-out 1.2s forwards;
    }

    /* Icon gets extra subtle hover-like lift on load */
    .icon-svg {
      transform: translateY(20px);
      animation: iconLift 1.2s ease-out 1.6s forwards;
    }

    @keyframes fadeIn {
      to {
        opacity: 1;
      }
    }

    @keyframes letterUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes slideInLeft {
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes iconLift {
      to {
        transform: translateY(0);
      }
    }



    .about-depth {
      perspective: 1200px;
    }

    .about-depth>* {
      opacity: 0;
      transform-style: preserve-3d;
      will-change: transform, opacity;
    }






    .btn-slide {
      position: relative;
      overflow: hidden;
      z-index: 1;
    }

    .btn-slide::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background-color: #000;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.5s ease, height 0.5s ease;
      z-index: -1;
    }

    .btn-slide:hover::before {
      width: 300%;
      height: 300%;
    }

    .btn-slide:hover {
      color: #fff;
    }



      .validate-has-error {
        position: absolute;
        left: 0;
        bottom: -20px;
        font-size: 12px;
        color: #dc3545;
        font-weight: 600;
      }

    /* SVG Animation Styles */
    .svg-scroll-container {
      position: relative;
      overflow: visible;
    }

    #animated-phone {
      transition: all 0.3s ease;
      will-change: transform, filter;
    }

    /* Animation classes that will be applied based on scroll */
    #animated-phone.scroll-1 {
      transform: scale(1.02);
    }

    #animated-phone.scroll-2 {
      transform: scale(1.04) rotate(1deg);
    }

    #animated-phone.scroll-3 {
      transform: scale(1.06) rotate(-1deg);
      filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));
    }

    #animated-phone.scroll-4 {
      transform: scale(1.08) rotate(1deg);
      filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.3));
    }

    #animated-phone.scroll-5 {
      transform: scale(1.1) rotate(-1deg);
      filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
    }

    /* Path animations */
    #path1 {
      transition: fill-opacity 0.5s ease;
    }

    #path2 {
      transition: fill-opacity 0.5s ease 0.1s;
    }

    #path3,
    #path4,
    #path5 {
      transition: fill-opacity 0.5s ease 0.2s;
    }

    #animated-phone.animate-paths #path1 {
      animation: pulsePath1 2s ease-in-out infinite;
    }

    #animated-phone.animate-paths #path2 {
      animation: pulsePath2 2s ease-in-out infinite 0.3s;
    }

    #animated-phone.animate-paths #path3 {
      animation: pulseDetails 1.5s ease-in-out infinite 0.6s;
    }

    #animated-phone.animate-paths #path4 {
      animation: pulseDetails 1.5s ease-in-out infinite 0.9s;
    }

    #animated-phone.animate-paths #path5 {
      animation: pulseDetails 1.5s ease-in-out infinite 1.2s;
    }

    @keyframes pulsePath1 {

      0%,
      100% {
        fill-opacity: 0.5;
      }

      50% {
        fill-opacity: 0.7;
      }
    }

    @keyframes pulsePath2 {

      0%,
      100% {
        fill-opacity: 0.5;
      }

      50% {
        fill-opacity: 0.8;
        transform: translateY(-1px);
      }
    }

    @keyframes pulseDetails {

      0%,
      100% {
        fill-opacity: 0.5;
      }

      50% {
        fill-opacity: 0.9;
      }
    }

    /* Scroll progress indicator (optional visual feedback) */
    .scroll-progress {
      position: absolute;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
      color: white;
      font-size: 12px;
      opacity: 0.5;
    }