.scroller {
  max-width: 1100px;
  
}

.scroller__inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.scroller[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
  --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
  --_animation-duration: 60s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}

/* general styles */

:root {
  --clr-neutral-100: hsl(0, 0%, 100%);
  --clr-primary-100: hsl(205, 15%, 58%);
  --clr-primary-400: hsl(215, 25%, 27%);
  --clr-primary-800: hsl(217, 33%, 17%);
  --clr-primary-900: hsl(218, 33%, 9%);
}

.tag-list {
  margin: 0;
  padding-inline: 0;
  list-style: none;
}

.tag-list li {
  padding: 1rem;
  background: var(--clr-primary-400);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem -0.25rem var(--clr-primary-900);
}

/* for testing purposed to ensure the animation lined up correctly */
.test {
  background: red !important;
}

/*//////////////////////////////////////////////*/

:root{
  --background-dark: #2d3548;
  --text-light: rgba(255,255,255,0.6);
  --text-lighter: rgba(255,255,255,0.9);
  --spacing-s: 8px;
  --spacing-m: 16px;
  --spacing-l: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 64px;
  --width-container: 1200px;
}

.hero-section{
  align-items: flex-start;
  display: flex;
  min-height: 80%;
  justify-content: center;
  padding: var(--spacing-xxl) var(--spacing-l);
}

.kard-grid{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-column-gap: var(--spacing-l);
  grid-row-gap: var(--spacing-l);
  max-width: var(--width-container);
  width: 100%;
}

@media(min-width: 540px){
  .kard-grid{
    grid-template-columns: repeat(2, 1fr); 
  }
}

@media(min-width: 960px){
  .kard-grid{
    grid-template-columns: repeat(4, 1fr); 
  }
}

.kard{
  list-style: none;
  position: relative;
}

.kard:before{
  content: '';
  display: block;
  padding-bottom: 70%;
  width: 100%;
}

.kard__background{
  background-size: cover;
  background-position: center;
  border-radius: var(--spacing-l);
  bottom: 0;
  filter: brightness(0.75) saturate(1.2) contrast(0.85);
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform-origin: center;
  trsnsform: scale(1) translateZ(0);
  transition: 
    filter 200ms linear,
    transform 200ms linear;
}

.kard:hover .kard__background{
  transform: scale(1.05) translateZ(0);
}

.kard-grid:hover > .kard:not(:hover) .kard__background{
  filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px);
}

.kard__content{
  padding: var(--spacing-l);
  position: absolute;
  bottom: 0;
}

.kard__title{
  color: var(--text-lighter);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-s);
  text-transform: uppercase;
}

/*head foto slide*/

main {
  position: relative;
  width: 100%;
  height: 800px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}

.itm {
  width: 0;
  height: 0;
  list-style-type: none;
  position: absolute;
  top: 60%;
  transform: translateY(-50%);
  z-index: 1;
  background-position: center;
  background-size: cover;
  border-radius: 20px;
  box-shadow: 0 20px 30px rgba(255,255,255,0.3) inset;
  transition: transform 0.1s, left 0.75s, top 0.75s, width 0.75s, height 0.75s;

  &:nth-child(1), &:nth-child(2) {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
  }

  &:nth-child(3) { left: 50%; }
  &:nth-child(4) { left: calc(50% + 220px); }
  &:nth-child(5) { left: calc(50% + 440px); }
  &:nth-child(6) { left: calc(50% + 660px); opacity: 0; }
}

.kontent {
  width: min(30vw,400px);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font: 400 0.85rem helvetica,sans-serif;
  color: white;
  text-shadow: 0 3px 8px rgba(0,0,0,0.5);
  opacity: 0;
  display: none;
  left: 10%;

  & .title {
    font-family: 'arial-black';
    text-transform: uppercase;
  }

  & .description {
    line-height: 1.7;
    margin: 1rem 0 1.5rem;
    font-size: 0.8rem;
   color: white;
 }

  & button {
    width: fit-kontent;
    background-color: rgba(0,0,0,0.1);
    color: white;
    border: 2px solid white;
    border-radius: 0.25rem;
    padding: 0.75rem;
    cursor: pointer;
  }
}

.itm:nth-of-type(2) .kontent {
  display: block;
  animation: show 0.75s ease-in-out 0.3s forwards;
}

@keyframes show {
  0% {
    filter: blur(5px);
    transform: translateY(calc(-50% + 75px));
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.left {
  position: absolute;
  bottom: 2rem;
  left: 5%;
  top: 45%;
  transform: translateX(-50%);
  z-index: 5;
  user-select: none;

  & .btn {
    background-color: rgba(255,255,255,0.2);
    color: #17263c;
    margin: 0 0.25rem;
    border-radius: 50%;
    cursor: pointer;

    &:hover {
      background-color: rgba(255,255,255,0.6);
    }
  }
}

.right {
  position: absolute;
  bottom: 2rem;
  right: 1%;
  top: 45%;
  transform: translateX(-50%);
  z-index: 5;
  user-select: none;

  & .btn {
    background-color: rgba(255,255,255,0.2);
    color: #17263c;
    margin: 0 0.25rem;
    border-radius: 50%;
    cursor: pointer;

    &:hover {
      background-color: rgba(255,255,255,0.6);
    }
  }
}

@media (width > 650px) and (width < 900px) {
  .kontent {
    & .title        { font-size: 1rem; }
    & .description  { font-size: 0.7rem; }
    & button        { font-size: 0.7rem; }
  }
  .itm {
    width: 0;
    height: 0;

    &:nth-child(3) { left: 50%; }
    &:nth-child(4) { left: calc(50% + 170px); }
    &:nth-child(5) { left: calc(50% + 340px); }
    &:nth-child(6) { left: calc(50% + 510px); opacity: 0; }
  }
}

@media (width < 650px) {
  .kontent {
    & .title        { font-size: 0.9rem; }
    & .description  { font-size: 0.65rem; }
    & button        { font-size: 0.7rem; }
  }
  .itm {
    width: 0;
    height: 0;

    &:nth-child(3) { left: 50%; }
    &:nth-child(4) { left: calc(50% + 140px); }
    &:nth-child(5) { left: calc(50% + 280px); }
    &:nth-child(6) { left: calc(50% + 420px); opacity: 0; }
  }
}

/*about foto*/

.about_field {
    /* Basic Styling */
    background-color: rgba(233,236,239,0.3);
    margin: 0 auto; /* To center the layout within the body */
    max-width: 1200px;
    min-height: 400px;
    padding: 20px;
    border-radius: 15px;

    display: grid;
    grid-template: auto / 2fr 1fr 2fr;
    align-items: center;
}
.foto_field {
    background-size: cover;
    grid-area: 1 / 1 / span 1 / span 2;
}
.text_field {
    width: 90%;
    height: 300px;
    padding: 15px;
    background-color: rgba(255,255,255,0.7);
    color: #343a40;
    border-radius: 8px;
    grid-area: 1 / 2 / span 1 / span 2;
}

/* For mobile version */
@media screen and (max-width: 550px) {
    .about_field {
    background-color: white;
        grid-template: 0.1fr 1fr 1fr / auto;
        align-items: start; /* No longer need to center vertically */
        justify-items: center; /* To center horizontally */
    }

    .foto_field {
    grid-area: 1 / 1 / span 2; /* First and second row */
    width: 0;
    height: 0;
   }

    .text_field {
	background-color: rgba(233,236,239,0.5);
    grid-area: 2 / 1 / span 2; /* Second and third row */
    }
}

/* footer */
.site-footer
{
  background-color:#26272b;
  padding:45px 0 20px;
  font-size:15px;
  line-height:24px;
  color:#d9d9d9;
}
.site-footer hr
{
  border-top-color:#bbb;
  opacity:0.5
}
.site-footer hr.small
{
  margin:20px 0
}
.site-footer h6
{
  color:#d9d9d9;
  font-size:16px;
  text-transform:uppercase;
  margin-top:5px;
  letter-spacing:2px
}
.site-footer a
{
  color:#737373;
}
.site-footer a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links
{
  padding-left:0;
  list-style:none;
}
.footer-links li
{
  display:block
  
}
.footer-links a
{
  color:#d9d9d9
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover
{
  color:gray;
  text-decoration:none;
}
.footer-links.inline li
{
	  color:red;

  display:inline-block
}
.site-footer .social-ikons
{
  text-align:right
}
.site-footer .social-ikons a
{
  width:40px;
  height:40px;
  line-height:40px;
  margin-left:6px;
  margin-right:0;
  border-radius:100%;
  background-color:#33353d
}
.copyright-text
{
  margin:0;  color:gray;
}
.copyright-text :hover
{
  margin:0;  color:#d9d9d9;
}
@media (max-width:991px)
{
  .site-footer [class^=col-]
  {
    margin-bottom:30px
  }
}
@media (max-width:767px)
{
  .site-footer
  {
    padding-bottom:0
  }
  .site-footer .copyright-text,.site-footer .social-ikons
  {
    text-align:center
  }
}
.social-ikons
{
  padding-left:0;
  margin-bottom:0;
  list-style:none
}
.social-ikons li
{
  display:inline-block;
  margin-bottom:4px;
}
.social-ikons li.title
{
  margin-right:15px;
  text-transform:uppercase;
  color:#96a2b2;
  font-weight:700;
  font-size:13px
}
.social-ikons a{
  background-color:#eceeef;
  color:#818a91;
  font-size:16px;
  display:inline-block;
  line-height:44px;
  width:44px;
  height:44px;
  text-align:center;
  margin-right:8px;
  border-radius:100%;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear
}
.social-ikons a:active,.social-ikons a:focus,.social-ikons a:hover
{
  color:#fff;
  background-color:#29aafe
}
.social-ikons.size-sm a
{
  line-height:34px;
  height:34px;
  width:34px;
  font-size:14px
}
.social-ikons a.facebook:hover
{
  background-color:#3b5998
}
.social-ikons .telegram
{
  background-color:#28a8e9;
  transform: scale(-1, 1);
}
.social-ikons a.telegram:hover
{
  background-color:#28a8e9
}
.social-ikons a.instagram:hover
{
  background-color:#f7008b
}
.social-ikons a.dribbble:hover
{
  background-color:#ea4c89
}
@media (max-width:767px)
{
  .social-ikons li.title
  {
    display:block;
    margin-right:0;
    font-weight:600
  }
}

/*team*/

         ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        img {
    max-width: 100%;
    height: auto;
}
.team-page-section{
    position:relative;
    padding-top:70px;
}

.team-page-section .team-block{
    margin-bottom:60px;
}

.team-block{
    position:relative;
}

.team-block .team-inner-box{
    position:relative;
    padding:40px 70px 28px 0px;
}

.team-block .team-inner-box:before{
    position:absolute;
    content:'';
    right:0px;
    top:0px;
    left:70px;
    bottom:0px;
    border-radius:10px;
    background-color:#f5f5f5;
    -webkit-transition:all 600ms ease;
    -moz-transition:all 600ms ease;
    -ms-transition:all 600ms ease;
    -o-transition:all 600ms ease;
    transition:all 600ms ease;
}

.team-block .team-inner-box::after{
    position:absolute;
    content:'';
    top:0px;
    left:70px;
    bottom:0px;
    width:0%;
    border-radius:10px;
    -webkit-transition:all 600ms ease;
    -moz-transition:all 600ms ease;
    -ms-transition:all 600ms ease;
    -o-transition:all 600ms ease;
    transition:all 600ms ease;
    background-image: -ms-linear-gradient(top, #fff 0%, #fff 100%);
    background-image: -moz-linear-gradient(top, #fff 0%, #fff 100%);
    background-image: -o-linear-gradient(top, #fff 0%, #fff 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(100, #fff));
    background-image: -webkit-linear-gradient(top, #fff 0%, #fff 100%);
    background-image: linear-gradient(to top, #061700 0%, #56ab2f 100%);
}

.team-block .team-inner-box:hover::after{
    width:81%;
}

.team-block .team-inner-box .team-social-icons{
    position:absolute;
    right:25px;
    top:100px;
    z-index:1;
}

.team-block .team-inner-box .team-social-icons li{
    position:relative;
    margin-bottom:20px;
}

.team-block .team-inner-box .team-social-icons li a{
    position:relative;
    color:#2C7744;
    font-size:18px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

.team-block .team-inner-box:hover .team-lower-content h3 a,
.team-block .team-inner-box:hover .team-social-icons li a,
.team-block .team-inner-box:hover .team-lower-content .team-designation{
    color:#ffffff;
}

.team-block .team-inner-box .team-image{
    position:relative;
    z-index:1;
    border-radius:10px;
    background-color:#ffffff;
    box-shadow:inset 0px 0px 35px rgba(0,0,0,0.20);
}

.team-block .team-inner-box .team-image img{
    position:relative;
    width:100%;
    display:block;
    border-radius:10px;
}

.team-block .team-inner-box .team-lower-content{
    position:relative;
    text-align:left;
    z-index:1;
    padding:30px 0 0px 110px;
}

.team-block .team-inner-box .team-lower-content h3{
    position:relative;
    color: #2C7744;
    font-size:18px;
    font-weight:700;
    line-height:1.3em;
}

.team-block .team-inner-box .team-lower-content h3 a{
    position:relative;
    color: #2C7744;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

.team-block .team-inner-box .team-lower-content .team-designation{
    position:relative;
    margin-top:5px;
    color: #2C7744;
    font-size:14px;
}

.team-block.team-style-two .team-inner-box .team-lower-content h3 a,
.team-block.team-style-two .team-inner-box .team-social-icons li a{
    color:#ff9600;
}

.team-block.team-style-two .team-inner-box:hover .team-lower-content h3 a,
.team-block.team-style-two .team-inner-box:hover .team-social-icons li a{
    color:#ffffff;
}

.team-block.team-style-two .team-inner-box::after{
    background-image: -ms-linear-gradient(top, #000 0%, #000 100%);
    background-image: -moz-linear-gradient(top, #000 0%, #000 100%);
    background-image: -o-linear-gradient(top, #fff 0%, #fff 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(100, #ff9600));
    background-image: -webkit-linear-gradient(top, #fff 0%, #fff 100%);
    background-image: linear-gradient(to bottom, #fff 0%, #fff 100%);
}

/*scrol top*/

#scroll-top {
	position: fixed;
    right: 10px;
    bottom: 10px;
    margin: 0;
    text-decoration: none;
}
#scroll-top button {
	width: 40px;
    height: 40px;
    outline: none;
    cursor: pointer;
    border-radius: 100%;
    border: solid 1px rgba(71,85,105,0.3);
    background-color: rgba(71,85,105,0.3);
    color: #fff;
    box-shadow: 0 0 1px rgba(71,85,105,0.3);
    display: block;
    font-family: tahoma;
    font-size: 16px;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#scroll-top button:hover {
  background-color: rgba(0,0,0,0.6);
    border-color: rgba(71,85,105,0.6);
}