/*
 * pov.lt colours:
 *   dark blue:     #134d73;
 *   light blue:    #869abf;
 *   reddish brown: #b22222;
 *   purple:        #800080;
 *   black:         #000000;
 *   gray:          #808080;
 *   light gray:    #cccccc;
 *   white:         #ffffff;
 */

 /* Basic reset */

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* main content */

html {
    scroll-behavior: smooth;
}

 body {
    font: 100% Verdana, Helvetica, Arial, sans-serif;
    color: #245779;
    width: 98vw; /* adjusted for scrollbar */
    min-height: 98vh;
    background-color: #ffffff; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(300,960,492)'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23E8F6FF'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='1765' height='1470.8' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.06'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
}

.content-wrapper {
    scroll-margin-top: 100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Navbar */

header {
    /* --_animationStartsAfter: 5vh; */
    --_animationDistance: 60px;
    --_surfaceColorEnd: hsl(0 50% 90% / 0.1);
    --_textColorStart: hsl(0 10% 90%);
    --_textColorEnd: hsl(0 10% 90%);
  
    /* --_logoAfterAnimation: none; */
  
    padding: 1rem 3rem;
    margin-inline: auto;
    margin-block: 0rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: var(--_headerWidth, auto);
  
    color: var(--_textColorStart);
    backdrop-filter: blur(0.35rem);
  
    position: sticky;
    z-index: 1000;
    top: 0rem;
  
    @supports (animation-timeline: view()) {
      /* top: -5rem; */
  
      border-radius: 100vw;
      backdrop-filter: blur(0.35rem);
  
      animation: stickyNav linear forwards;
      animation-timeline: view();
      animation-range-start: calc(100vh + var(--_animationStartsAfter));
      animation-range-end: calc(
        98vh + var(--_animationStartsAfter) + var(--_animationDistance)
      );
    }
  
    .logo {
      display: var(--_logoDisplay, block);
      fill: currentColor;
      height: 6em;
    }
  
    nav ul {
      display: flex;
      gap: auto;
      list-style: none;
      margin: 0;
      padding: 0;
    }
  
    nav a {
      color: #245779;
      text-decoration: none;
      font-weight: 500;
  
      &:hover,
      &:focus {
        color: var(--clr-primary-300);
        text-decoration: underline;
        text-decoration-thickness: 0.07lh;
        text-underline-offset: 0.17lh;
      }
    }
  }
  
@keyframes stickyNav {
    0%,
    100% {
        --_headerWidth: fit-content;
        --_logoDisplay: var(--_logoAfterAnimation);
    }

    100% {
        top: 1rem;
        color: var(--_textColorEnd);
        background-color: var(--_surfaceColorEnd);
        box-shadow: inset 0 0 0.5rem hsl(0 0% 100% / 0.1),
        0 0 0.75rem hsl(0 0% 0% / 0.3);
    }
}

.nav-links {
    color: black;
}
.nav-links a {
    color: #245779;
    padding: 0em 1em;
    text-decoration: none;
    font-size: 120%;
    font-weight: bold;
    text-transform: lowercase;
    border: none;
}

nav.links a:visited {
    color: #134d73;
}
nav.links a:hover {
    color: #b22222;
}

/* Links */

a {
    color: #869ABF;
}

a:visited {
    color: #00427A;
}

a:active, a:hover {
    color: #B22222;
}

/* Paragraphs and headings */

p {
    font-size: normal;
    margin: 1em 0em 0em 0em;
}
h1, h2, h3 {
    margin: 2em 0em 0.5em 0em;
}

h1 {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    color: #134D73;
    font-size: 2.5em;
    font-weight: normal;
}

h2 {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    color: #134D73;
    font-weight: normal;
    font-size: 2em;
}

h3 {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    color: #134D73;
    font-weight: normal;
}
main {
    width: 60vw;
    margin: 0 auto;
    display: grid;
    grid-auto-flow: row;
    grid-template-rows: max-content;
    row-gap: 1em;
}

.jobs ul li {
    font-size: 1.2em;
    margin-left: 1em;
}
address {
    font-size: 1.2em;
}

/* Project list css */
details {
    scroll-margin-top: 100px
}
details[open]::details-content {
    max-height: 500px; /* Set max possible height */
    transition: 
        max-height 1s ease,
         content-visibility 1s;
    transition-behavior: allow-discrete;
  }
  
  details::details-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 1s ease, content-visibility 1s;
  }

summary {
    font-size: 1.5em;
    /* color: #00427A; */
    cursor: pointer;
    padding-top: 0.4em;
}

/* scroll spacing correction */

#services {
    padding-top: 80px;
    margin-top: 0;
}

/* Images */

img.link {
    border: none;
}

img.right {
    float: right;
    margin: 0 1em 1em 1em;
    border: 1px solid #134d73;
}

img.rightNoBorder {
    float: right;
    margin: 0 1em 1em 1em;
    border: none;
}

img.leftNoBorder {
    min-width: 150pt;
    clear: both;
    float: left;
    margin: 1em 1em 1em 1em;
    border: none;
}

h2.clear {
    clear: both;
}

/* Client carousel css */

.img-link-container {
    display: flex;
    flex-direction: row;
    max-height: 100px;

}

.client-img {
    align-items: center;
    height: 80px;
    width: auto;
    margin-top: 5em;
}

.client-logos {
    display: inline-block;
    padding: 0 20px;

}
.client-carousel {
    white-space: nowrap;
    overflow-x: hidden;
    max-height: 250px;
}

.client-logos-group {
    display: inline-block;
    will-change: transform;
    animation: scrolling 40s linear infinite;

}
@keyframes scrolling {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
.client-carousel {
    &:hover .client-logos-group {
        animation-play-state: paused;
    }
}

/* Testimonial blockquotes */

blockquote::after{
  content: '';
}

blockquote span{
    padding-left: 28em;
    display:block;
    color:#333333;
    font-style: normal;
    margin-top:1em;
}

.testimonial-quote h3 {
    font-size: 1.5em; 
    text-align: center;
    margin-bottom: 40px;
  }
.testimonial-quote {
    padding: 2em 0 2em 0;
}
.testimonial-quote blockquote {
    background: none;
    color: #75808a;
    font-family: Georgia, serif;
    font-size: 1.2em;
    font-style: italic;
    line-height: 1.4 !important;
    margin: 0;
    position: relative;
    z-index: 0;
}

/* Quotation mark for blockquote */

.testimonial-quote blockquote p:first-child:before {
    content: '\201C';
    font-family: 'Times New Roman', Georgia, Times, serif;
    color: #869abf;
    font-size: 7.5em;
    font-weight: 700;
    opacity: .3;
    position: absolute;
    top: -.4em;
    left: -0.2em;    
    text-shadow: none;
    z-index: -300;
}

.testimonial-quote cite {
    text-align: right; 
    color: gray;
    display: block;
    font-size: .8em; 
}
  
.testimonial-quote cite span {
    color: #5e5e5e;
    font-size: 1em;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.testimonial-quote .quote-container {
    padding-left: 16em; 
}

.testimonial-quote.right cite {
    text-align: right; 
}

.testimonial-quote img {
    display: block;
    width: 8vw;
    top: 5em; 
    left: 0;    
}

/* Footer */

em.pov {
    font-weight: normal;
}

a.footnote {
    font-size: x-small;
    vertical-align: top;
    line-height: normal;
    margin: 0px 1px;
    text-decoration: none;
}

p.footnote {
    justify-content: center;
    margin-left: 2em;
    margin-right: 2em;
    font-size: small;
}

p.footnote sup {
    font-size: x-small;
    vertical-align: top;
    line-height: normal;
    margin: 0px 1px;
    text-decoration: none;
}
footer {
    margin-top: 5em;
    font-size: x-small;
    color: gray;
    margin-left: 2em;
    margin-right: 2em;
    margin-bottom: 1em;
    clear: both;
    text-align: center;
}
footer a {
    color: gray;
    font-weight: normal;
    text-decoration: none;
    border-bottom: 1px dotted gray;
}
footer a:visited {
    color: gray;
}
footer a:active,
footer a:hover {
    color: #b22222;
}