* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Mulish, Arial;
  }

  html,
  body {
      background-color: #ffffff !important;
      color: #000000 !important;
      color-scheme: light !important;
      overflow-x: hidden;
      max-width: 100% !important;
  }

  .navbar {
      background-color: white;
      max-width: 100%;
      padding-top: 1.25rem;
      padding-bottom: 1.68rem;
      z-index: 10;
      position: sticky !important;
      top: 0;
      left: 0;
      right: 0;
      box-shadow: 0 0 1.26rem rgba(0, 31, 134, 0.5);
      background: transparent;
      backdrop-filter: blur(17px);
      animation: padni 0.7s ease-out forwards;
      width: 100vw;
  }

  @keyframes padni {
      0% {
          opacity: 0;
          transform: translateY(-100px);
      }

      80% {
          opacity: 0.6;
      }

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

  .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 1.56rem;
      padding-right: 1.56rem;
      margin-top: 0px;
  }

  .logo {
        width: 9rem;
        height: 2.5rem;
        /*width: 12rem;
        height: 3rem;*/
      line-height: 21px;
      filter: contrast(130%);
  }

  .bar {
      display: flex;
      vertical-align: center;
      justify-content: space-around;
      flex: 1;
  }

  .bar a {
      font-family: Mulish, Arial;
      font-weight: 600;
      text-decoration: none;
      color: #000;
      padding: 0.5rem 1rem;
      transition: all 0.3s;
  }

  .bar a:hover {
      border-bottom: 1px solid rgba(0, 0, 74, 0.639);
      border-top: 1px solid rgba(0, 0, 74, 0.639);
  }

  .bar div {
      display: flex;
      vertical-align: center;
      max-width: 100%;
  }

  a {
      text-decoration: none;
      color: inherit;
  }

  .fufi {
      transition: all 0.8s ease;
  }

  .fufi.highlight {
      transform: scale(1.03);
      /* box-shadow: 0 0 15px rgba(0, 7, 102, 0.6); */
      color: #02006c;
  }

  .contact-us {
      width: 12rem;
      height: 4rem;
      color: black;
      font-size: 1rem;
      font-weight: 500;
      font-family: Mulish, Arial;
      background: rgba(255, 255, 255);
      border: none;
      border-radius: 100px;
      position: relative;
      display: flex;
      justify-content: center;
      font-weight: 600;
      transition: 0.5s box-shadow;
      transition: 0.2s color;
      align-items: center;
      cursor: pointer;
  }

  .contact-us::after {
      content: '';
      position: absolute;
      background-image: linear-gradient(to bottom right, rgb(0, 14, 163), rgb(3, 0, 55));
       background-image: linear-gradient(to bottom right, rgb(16, 22, 88), rgb(10, 9, 40));
    
      height: 108%;
      width: 103%;
      border-radius: 100px;
      z-index: -1;
  }

  .contact-us:hover {
      z-index: 0;
      color: white;
  }

  .services-hero {
      background-color: #ffffff;
      background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80);
      /* background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url('https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); */
      background-position: center;
      background-size: cover;
      position: relative;
      height: 40rem;
      width: 100vw;
      overflow: visible;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .services-hero-content {
      text-align: center;
      max-width: 800px;
      padding: 2rem;
  }

  .services-hero h1 {
      font-family: Outfit, Arial;
      font-size: 3.5rem;
      font-weight: 900;
      line-height: 4rem;
      background: linear-gradient(180deg, hsla(242, 100%, 29%), hsl(0, 0%, 0%));
      background-clip: text;
      color: transparent;
      margin-bottom: 1.5rem;
  }


  .services-hero p {
      font-size: 1.25rem;
      color: #333;
      margin-bottom: 2rem;
      line-height: 1.6;
  }

  .hero-cta {
      margin-top: 2rem;
  }

  .btn {
      display: inline-block;
      padding: 0.8rem 1.5rem;
      border-radius: 6px;
      text-decoration: none;
      font-weight: 600;
      margin: 0 0.5rem;
      transition: all 0.3s;
  }

  .btn-primary {
      background: #0b63ff;
      color: #fff;
  }

  .btn-outline {
      border: 1px solid #ddd;
      color: #222;
      background: transparent;
  }

  .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }

  .section {
      padding: 4rem 2rem;
  }

  .container {
      max-width: 1080px;
      margin: 0 auto;
  }

  .section-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      align-items: center;
  }

  .section h2 {
      font-family: Outfit, Arial;
      font-size: 2.5rem;
      font-weight: 700;
      background: linear-gradient(180deg, hsla(242, 100%, 29%), hsl(0, 0%, 0%));
      background-clip: text;
      color: transparent;
      margin-bottom: 1.5rem;
  }

  .section p {
      font-size: 1.1rem;
      line-height: 1.6;
      color: #333;
      margin-bottom: 1rem;
  }

  .bullet-list {
      list-style-type: none;
      margin: 1.5rem 0;
  }

  .bullet-list li {
      padding: 0.5rem 0;
      color: #444;
      position: relative;
      padding-left: 1.5rem;
  }

  .bullet-list li:before {
      content: "•";
      color: #0e0067;
      font-weight: bold;
      position: absolute;
      left: 0;
  }

  .figure {
      margin: 1rem 0;
  }

  .figure img {
      width: 100%;
      border-radius: 8px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  }

  .figure figcaption {
      text-align: center;
      font-style: italic;
      color: #666;
      margin-top: 0.5rem;
  }

  .section--light {
      background: #fafafa;
  }

  .features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
  }

  .feature {
      background: white;
      padding: 2rem;
      border-radius: 8px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
  }

  .feature h3 {
      font-size: 1.3rem;
      margin-bottom: 1rem;
      color: #0e0067;
  }

  .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
  }

  .card {
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
      transition: transform 0.3s;
  }

  .card:hover {
      transform: translateY(-5px);
  }

  .card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      display: block;
  }

  .card-body {
      padding: 1.5rem;
  }

  .card h3 {
      font-size: 1.3rem;
      margin-bottom: 1rem;
      color: #0e0067;
  }

  .section--accent {
      background: #f4fbff;
  }

  .cta-row {
      margin-top: 2rem;
  }

  .text-center {
      text-align: center;
  }

  .promo {
      max-width: 800px;
      margin: 0 auto;
  }

  .promo h2 {
      margin-bottom: 1rem;
  }

  .promo .lead {
      font-size: 1.2rem;
      margin-bottom: 2rem;
  }
  .feature {
      
      transition: transform 0.4s ease-out;
      /* glatka animacija */
      cursor: pointer;
    }

    .feature:hover {
      transform: scale(1.09);
      /* uvećava 10% */
    }

  .btn-hero {
      background: #0b63ff;
      color: #fff;
      padding: 1rem 2rem;
      border-radius: 10px;
      font-size: 1.1rem;
  }

  .tt-picture {
      width: 20px;
      height: auto;
  }

  .meeting-slika {
      animation: levitate 5s ease-in-out infinite;

  }


  .footer1_1 {
      transition: all 0.8s ease;
      transition-delay: 0.3s;
  }

  .footer1_1.highlight {
      transform: scale(1.03);
      /* box-shadow: 0 0 15px rgba(0, 7, 102, 0.6); */
      color: #02006c;
  }

  @keyframes levitate {

      0%,
      100% {
          transform: translateY(0);

      }

      50% {
          transform: translateY(-10px);
      }
  }

  .new_footer {
      background-color: #e3e3e3b7;
      padding-top: 88px;
      padding-bottom: 88px;
      position: relative;
  }

  .footer-container {
      grid-column-gap: 72px;
      grid-row-gap: 72px;
      justify-content: flex-start;
      align-items: flex-start;
      padding-left: 0;
      padding-right: 0;
      display: flex;
      margin-left: auto;
      margin-right: auto;
      max-width: 840px;
      color: black;
      font-family: Poppins, sans-serif;
  }

  .footer-container2 {
      grid-column-gap: 3vw;
      grid-row-gap: 7vh;
      grid-template-rows: auto;
      grid-template-columns: 1fr 1fr;
      grid-auto-columns: 1fr;
      max-width: 450px;
      display: grid;
  }

  .logo-footer {
      width: 190px;
      height: auto;
  }

  .footer1 {
      color: #0e0067;
      font-weight: 700;
      font-size: 20px;
      margin-bottom: 20px;
      margin-top: 8px;
  }

  /* .footer2 {
      margin-bottom: 10px;
      font-weight: 700;
      font-size: 17px;
      color: rgb(108, 107, 107);
  } */
  .footer2 {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      font-weight: 700;
      font-size: 17px;
      color: rgb(108, 107, 107);
  }

  .footer2:hover {
      color: #535353;
      text-decoration: underline;
  }

  .footer-svg {
      margin-top: 5px;
  }

  .x-picture {
      width: 28px;
      height: 28px;
  }

  #responsiveMenuToggleButton {
      background-color: transparent;
      border: 0;
      cursor: pointer;
      display: none;
      position: absolute;
      top: 0;
      right: 0;
  }

  #responsiveMenuToggleButton svg {
      height: 2.2rem;
      width: 2.2rem;
      /* border: 1px solid rgb(4, 14, 128); */
      border-radius: 3px;
      color: rgb(1, 8, 90);
      position: absolute;
      top: 1.75rem;
      right: 0.75rem;
  }

  #responsiveMenuToggleButton .openIcon {
      display: block;
  }

  #responsiveMenuToggleButton .closeIcon {
      display: none;
  }

  #responsiveMenuToggleButton.open .openIcon {
      display: none;
  }

  #responsiveMenuToggleButton.open .closeIcon {
      display: block;
  }


  .social_net {
      grid-column-gap: 12px;
      grid-row-gap: 12px;
      display: flex;
  }

  .link-block-2 {
      border: 1px solid #ffffff;
      border-radius: 100%;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 50px;
      display: flex;
      background-color: #0e0067;
  }

  .text-block-39 {
      color: #8b949e;
      margin-left: auto;
      font-family: Poppins, sans-serif;
      font-size: 13px;
  }

  .x-picture {
      width: 28px;
      height: 28px;
  }

  .w-container {
      max-width: 900px !important;
      margin-left: auto;
      margin-right: auto;
  }

  .container-21 {
      max-width: 900px;
      margin-left: 90px;
      margin-right: 0px;
      grid-column-gap: 72px;
      grid-row-gap: 72px;
      max-width: 1215px;
      padding-left: 0;
      padding-right: 0;
      display: flex;
      align-items: center;
      margin-top: 30px;
  }

  @media screen and (max-width: 1199px) {
      .bar {
          display: none;
          flex-direction: column;
          width: 100%;
      }

      .contact-us {
          display: none;
      }

      .nav-container {
          flex-direction: column;
          align-items: flex-start;
          width: 100%;
          padding: 0;
          padding-top: 10px;
      }

      .logo {
          margin-left: 10px;
      }

      .bar.open {
          display: block;
      }

      .bar a {
          color: rgb(255, 255, 255);
          width: 100%;
          flex-direction: column;
          padding: 1rem;
          background-color: rgb(8, 0, 53);
      }
  }

  @media screen and (max-width:496px) {
      .btn2 {
          margin-top: 20px;

      }

      .services-hero {
          padding-top: 80px;
      }
  }

  @media screen and (max-width: 991px) {
      .services-hero h1 {
          font-size: 2.5rem;
          line-height: 3rem;
      }

      .section-inner {
          grid-template-columns: 1fr;
      }

      .footer-container {
          padding-left: 7vw;
          padding-right: 10vw;
          padding-right: 10px;
          max-width: 721px;
          column-gap: 30px;
      }
  }

  @media screen and (max-width:800px) {
      .footer-container2 {
          grid-template-columns: 1fr;
      }
  }

  @media screen and (max-width: 767px) {
      .services-hero {
          height: 30rem;
      }

      .services-hero h1 {
          font-size: 2rem;
          line-height: 2.5rem;
      }

      .services-hero p {
          font-size: 1rem;
      }

      .section h2 {
          font-size: 2rem;
      }

      .features,
      .cards {
          grid-template-columns: 1fr;
      }

      .container-21 {
          flex-direction: column;
          gap: 30px;
          justify-content: start;
          align-self: flex-start;
      }

      .social_net {
          align-self: flex-start;
      }
  }

  @media screen and (max-width: 479px) {
      .services-hero {
          height: 25rem;
      }

      .services-hero h1 {
          font-size: 1.8rem;
          line-height: 2.2rem;
      }

      .section {
          padding: 3rem 1rem;
      }

      .footer-container2 {
          grid-column-gap: 22px;
          grid-row-gap: 45px;
          grid-template-columns: 1fr;
          margin-left: 30px;
          margin-top: 30px;
      }

      .footer-container {
          grid-column-gap: 27px;
          grid-row-gap: 27px;
          flex-flow: column;
          margin-bottom: 20px;
      }
  }

  @media screen and (max-width:1199px) {
      #responsiveMenuToggleButton {
          display: block;

          margin-top: 7px;
      }

      .bar {
          flex-direction: column;
      }

      @media screen and (max-width: 700px) {
          .w-container {
              margin-left: 30px;
              margin-right: 30px;
          }
      }

      @media screen and (max-width: 750px) {
          .container2 {
              grid-template-columns: 1fr;
          }
      }

      /* .bar.open{
  display: block;
  
} */


  }

  @media screen and (max-width:630px) {
      #responsiveMenuToggleButton {
          margin-top: 0;
      }

  }

  .image-container {
    display: flex;           
    justify-content: center; 
    align-items: center;    
}

.image-container img {
    max-width: 100%;   
    height: auto;      
    display: block;    /* uklanja eventualni whitespace ispod slike */
}