@font-face {
        font-family: Dosis;
        src: url(./fontit/Dosis-Bold.ttf);
    }
    @font-face {
        font-family: Open-Sans;
        src: url(./fontit/OpenSans_Condensed-Regular.ttf);
    }
    h1 {
        font-family: Dosis;
    }
    h2 {
        font-family: Dosis;
    }
    a, p {
        font-family: Open-Sans;
    }
    
/* ===================== LOADING SCREEN ===================== */
    .loader {
      width: 90px;
      height: 90px;
      position: relative; /* For absolute positioning of pseudo-element and logo */
    }
    .loader::before {
      content: "";
      box-sizing: border-box;
      position: absolute;
      top: 0;
      left: 0;
      width: 90px;
      height: 90px;
      border-radius: 50%;
      border-top: 3px solid #71C949;
      border-right: 3px solid transparent;
      animation: spinner8217 0.8s linear infinite;
    }
    @keyframes spinner8217 {
      to {
        transform: rotate(360deg);
      }
    }
    /* Initial state for loading screen */
    #loading-screen {
      opacity: 1;
      transition: opacity 0.5s ease-out;
      z-index: 100;
    }
/* ===================== LOADINGSCREEN LOPPUU ===================== */
/* ===================== MOBIILIMENU ===================== */

.close-menu,
.open-menu {
    position: absolute;
    cursor: pointer;
    display: none;
}

.open-menu {
    top: 50%;
    right: 1px;
    transform: translateY(-50%);
}

.close-menu {
    top: 30%;
    right: 1px;  
}

#check {
    display: none;
}

.hamburger-icon {
    display: block;
    width: 30px;
    position: relative;
    z-index: 200;
}

.close-icon {
    display: block;
    width: 30px;
    position: relative;
    z-index: 200;
}

.hamburger-icon::before,
.close-icon::before {
    top: -8px;
}

.hamburger-icon::after,
.close-icon::after {
    bottom: -8px;
}


#check:checked ~ .open-menu .hamburger-icon,
#check:not(:checked) ~ .close-menu .close-icon {
    display: none;
}

#check:checked ~ .open-menu .close-icon,
#check:not(:checked) ~ .close-menu .hamburger-icon {
    display: block;
}

#check:checked ~ .menu {
    right: 0;
}

.hidden2 {
    display: none;
}

@media (max-width: 802px) {
    .menu {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 80%;
        height: 100vh;
        position: fixed;
        top: 0;
        right: -100%;
        z-index: 100;
        background-color: #4971C9;
        color: #fff;
        transition: all 0.5s ease-in-out;
        font-size: 24px;
    }
    
    .hidden2 {
        display: block !important;
    }
    
    .menu li:not(:first-child) {
        margin-top: 40px;
    }

    .close-menu,
    .open-menu {
        display: block;
    }

    .menu li {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .menu a {
        margin-right: 0;
        margin-left: 0;
    }

    #check:checked ~ .menu {
        right: 0;
    }
}
/* ===================== MOBIILIMENU LOPPUU ===================== */
/* ===================== ETUSIVU CSS ===================== */
    .Palvelut {
    position: relative;
    }

    .Palvelut {
        overflow: hidden;
    }

    .Palvelut:before {
        content: ''; /* Create the pseudo-element */
        position: absolute; /* Position the pseudo-element absolutely */
        top: 40%;
        left: 50%; /* Center the pseudo-element horizontally */
        transform: translateX(-10%); /* Center the pseudo-element horizontally */
        width: calc(100vw - (100% - 1700px) / 2); /* Stretch the pseudo-element to the right side */
        height: 50%;
        background-color: #94B0ED; /* Background color */
        z-index: -1; /* Push the pseudo-element behind other content */
        border-radius: 12px 0 0px 12px;
    }

    @media (max-width: 768px) {
        .Palvelut:before {
            height: 70%;
            top: 24%;
        }
    }


    .mainbanner {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 14px 16px -1px rgba(0, 0, 0, 0.50);
}

    .mainbanner {
        background: linear-gradient(to right, #181F42 20%, #355BAD 70%, #B9D0FF 100%);
    }
    
    @media (max-width: 768px) {
        .mainbanner {
            background: linear-gradient(to bottom, #181F42 20%, #355BAD 70%, #B9D0FF 100%);
        }
    }

  #landingimg {
    transition: transform 0.1s ease-out;
    will-change: transform;
  }
/* ===================== ETUSIVU LOPPUU ===================== */

/* ================== MEISTA NAKYMAN CSS =================== */

    .truncate-lines {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 5.9em; /* Adjust based on line height */
}
#instagram-feed {
    align-items: flex-start; /* Prevent items from stretching to the tallest item */
}
/* ================== MEISTA NAKYMAN CSS LOPPUU=================== */
/* ================== PALVELUT NAKYMAN CSS LOPPUU=================== */
@keyframes rotateImg {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

.rotate-banner {
  animation: rotateImg 18s linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}


/* (Optional) your fadeIn stays the same */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0;
  transform: translateY(10px);
  will-change: opacity, transform;
}

.reveal.in {
  animation: fadeIn 600ms ease forwards;
}

    
/* ================== PALVELUT NAKYMAN CSS LOPPUU=================== */