/* style CSS */

    body{
  padding-top: 0px !important;
  background: linear-gradient(180deg, #f4f7f9 0%, #e9eff3 100%);
}


html::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;

  /* Always behind everything */
  z-index: -1;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 560 360'%3E%3Cg fill='none' stroke='%23107896' stroke-opacity='.18' stroke-width='1.2'%3E%3Crect x='36' y='44' rx='14' ry='14' width='280' height='190'/%3E%3Crect x='60' y='68' rx='10' ry='10' width='232' height='126'/%3E%3Cpath d='M146 246h60'/%3E%3Crect x='350' y='52' rx='18' ry='18' width='160' height='260'/%3E%3Crect x='365' y='82' rx='10' ry='10' width='130' height='200'/%3E%3Ccircle cx='430' cy='298' r='6'/%3E%3Crect x='80' y='260' rx='12' ry='12' width='190' height='70'/%3E%3Crect x='95' y='276' rx='10' ry='10' width='160' height='38'/%3E%3C/g%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: 85% var(--bgY, 180px);

  /* Optional: makes movement feel smoother */
  will-change: background-position;

  background-size: 95%;
  opacity: 0.26;

  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95), rgba(0,0,0,0.2));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95), rgba(0,0,0,0.2));
}

html, body{
  min-height: 100%;
}

    
    .text-primary {
      color: #107896 !important;
        }

    .bg-primary {
      --bs-bg-opacity: 1;
      background-color: #107896 !important;
        }

    .btn-outline-light:hover {
      background-color: #107896 !important;
        }

    #home-slider .fa-angles-down {
      position: absolute;
      left: 50%;
      bottom: 50px;
      color: #fff;
      display: inline-block;
      width: 24px;
      margin-left: -12px;
      font-size: 24px;
      line-height: 24px;
      z-index: 999;
      animation: bounce 3000ms infinite;
        } 

    .read-more::after {
    content: 'Learn more';
        }

    .parallax {
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 740px;
        position: relative;
        }

    .parallax-caption {
        position: absolute;
        top: 20px;
        left: 20px;
        color: #fff;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

    .parallax-caption h3 {
        font-size: 2rem;
        font-weight: bold;
        } 

    /*..parallax-caption p {
        font-size: 1.2rem;
        }  */

    .parallax-1 {
        background-image: url('/img/slider/website_information_small.webp');
        }

    .parallax-2 {
        background-image: url('/img/slider/website_coding_small.webp');
        }
    /* core_web_vitals.webp */ 
    .parallax-3 {
        background-image: url('/img/slider/1025-1200x800_small.webp');
        }

    .service-icon {
      border-radius: 8px;
      color: #fff;
      display: inline-block;
      font-size: 36px;
      height: 90px;
      line-height: 90px;
      width: 90px;
      transition: background-color 0.2s ease;
        }   

    @media screen and (orientation: landscape) {
        .carousel img {
            max-height: 100vh;
        }
    }

    .parallax {
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 740px;
        position: relative;
        }

    /* responsive CSS */        

    @media only screen and (max-width: 2400px) {
        .parallax {
            min-height: 940px;
        }
    }
    @media only screen and (max-width: 1720px) {
        .parallax {
            min-height: 1000px;
        }
    }
    @media only screen and (max-width: 1080px) {
        .parallax {
            min-height: 1200px;
        }
    }
    @media only screen and (max-width: 852px) {
        .parallax {
            min-height: 1700px;
        }
    }
    @media only screen and (max-width: 600px) {
        .parallax {
            min-height: 1800px;
        }
    }
    @media only screen and (max-width: 500px) {
        .parallax {
            min-height: 2000px;
        }
    }

    :root{
  /* Brand */
  --brand-700:#0f5f6b;   /* header / primary */
  --brand-600:#136f7e;   /* hover / accents */
  --brand-500:#178398;   /* icon tiles / buttons */

  /* Neutrals */
  --bg-0:#f6f8fb;        /* page background */
  --bg-1:#eef3f7;        /* subtle gradient end */
  --surface:#ffffff;     /* cards / content blocks */
  --border:#d9e2ea;      /* dividers / hairlines */

  /* Text */
  --text-900:#0f172a;    /* headings */
  --text-700:#334155;    /* body */
  --text-500:#64748b;    /* muted */

  /* Links */
  --link:#0b66c3;
  --link-hover:#084f96;

  /* Focus (accessibility) */
  --focus:#ffbf47;
}

.navbar .nav-link.active {
  text-decoration: underline;
  text-underline-offset: 6px;
}