body {
  background-color: #e0e7ff;
  margin: 0;
  font-family: "raleway", sans-serif;
  font-weight: 300;
  font-style: normal;
  display: flex;
  justify-content: center;
  overflow-y: auto;
  padding: 0; /* Remove outer padding to align full width */
  width: 100%;
}

/* Page container styling with parallax background */
.page-container {
  width: 100%;
  max-width: 1200px;
  border-radius: 5px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  background-image: url("images/Artboard 1.png");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  flex-wrap: wrap;
  box-sizing: border-box; /* Include padding in width calculation */
}
  
@media (max-width: 768px) {
  /* Container adjustments */
  .page-container {
    width: 100%;
    border-radius: 0; /* Remove border radius on mobile */
  }
}

/* Divider styling for transparent strip between sections */
.divider {
  height: 2px;
  background-color: rgba(79, 131, 186,  0.6); /* Adjusted for better visibility */
  backdrop-filter: blur(5px);
}

/* Header styling */
.sticky-header {
  position: fixed;
  box-sizing: border-box;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px;
  background-color: #ffffff;
  padding: 15px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
}

.logo img {
  max-height: 60px;
}

/* Navigation Links */
.sticky-header nav ul {
  list-style: none;
  display: flex;
  gap: 40px;
  margin: 0;
}

.sticky-header nav a {
  font-family: "Raleway", sans-serif;
  font-size: 1.3rem;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}

h2 {
  font-family: "Raleway", sans-serif;
  font-size: 1.8rem;
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
  text-align: center;
  margin: 40px 0;
}

.sticky-header nav a:hover {
  color: #357ab7;
}

/* Contact Button */
.contact-button {
  background-color: #1966abcc;
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.contact-button:hover {
  background-color: #357ab7;
}

/* Hero Section with Parallax Background */
.hero-section {
  position: relative;
  height: 70vh;
  background-attachment: fixed;
  background-size: contain;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #464646;
  background: radial-gradient(#e1e7fee6, #94c4e340);
}

.hero-section h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #333;
}

.hero-section p {
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.2rem;
  line-height: 1.6;
}

.use-cases-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Ensure responsiveness */
  gap: 50px;
  padding: 25px;
}

/* Use Cases Section Container */
.use-cases-grid {
  padding: 60px 20px;
  min-height: 600px;
  background-color: rgba(255, 255, 255, 0.55); /* Transparent background */
  backdrop-filter: blur(10px);
  align-items: start;
}


.hamburger-menu {
  display: none;
  cursor: pointer;
  font-size: 24px;
}

/* Flip Card Styling */
.use-case-item,
.product-service-item {
  position: relative;
  width: calc(100% - 20px); /* Prevents overflow by keeping cards inside container */
  max-width:250px; /* Restrict maximum width */
  min-height: 240px;
  perspective: 1000px;
  cursor: pointer;
  margin: 0 auto;
  box-sizing: border-box; /* Prevents overflow caused by padding */
  padding-right: 40px;
  
}
.use-cases-grid .parallax-section {
  background-color: white;
  min-height: 8000px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease-in-out;
  transform-style: preserve-3d;
  transform-origin: center center;
}

/* Flip animation trigger with scale */
.use-case-item[data-flip="true"] .card-inner,
.product-service-item[data-flip="true"] .card-inner {
  transform: rotateY(180deg) translateX(-40px); /* Slight scaling */
}

.card-front {
  z-index: 2;
}

/* Kaardi esikülje mudimine*/
.card-front {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 15px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  background-color: rgba(225, 231, 254, 0.98);
  background-image: linear-gradient(to top left, rgba(180, 180, 180, 0.45) 50%, transparent 50%);
  background-size: 26px 26px;
  background-repeat: no-repeat;
  background-position: bottom right;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* kaardi tagakülje mudimine */
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 15px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #333; 
  transform: rotateY(180deg);
  position: relative;
  color: #333; /* Text color for visibility */
  background-color: rgba(225, 231, 254, 0.9);
  backdrop-filter: blur(10px); /* Adds glassmorphism effect */
  
}

/* Use cases icon sizing (original) */
.use-case-item .card-front img {
  object-fit: cover;
  width: 70%;
  height: 180px;
  margin-bottom: 10px;
}

/* Products & Services image wrapper */
.card-front .img-wrapper {
  width: 90%;
  height: 165px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
  flex-shrink: 0;
}

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

/* Heading and text */
.card-front h3,
.card-back h3 {
  font-size: 1.3rem;
  margin: 10px 0;
  color: #333;
}

.card-front p,
.card-back p {
  display: flex;
  font-size: 0.9rem;
  color: #0c0c0c;
  line-height: 1.5;
  margin-bottom: 15px;
}

/* Products and Services container */
.products-services-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 50px;
  height: auto;
  padding: 0 20px 60px;
  margin: 0 auto;
  width: 100%;
  flex-wrap: wrap;
}
#products-services {
  padding: 60px 40px 100px 40px; /* Increase overall padding */
  backdrop-filter: blur(10px); /* Maintain glassmorphism effect */
}
.tagembed-section{
  /* background-color: rgba(255, 255, 255, 0.55); Light background for contrast */
  padding: 30px;
}
.tagembed-widget {
    width: 100%;
    height: 400px; /* Adjust this height as needed */
    overflow: hidden; /* Hide overflow if content exceeds the defined height */
    margin: 20px 0; /* Space above and below the widget */
    border-radius: 10px; /* Optional: rounded corners for a softer look */
     /* Optional: subtle shadow for depth */
    padding: 20px;
    
}

/* Contact section styling */
#contact {
  padding: 80px 20px; /* Maintain padding */
  text-align: center; /* Centered text for header and form */
  max-width: 1200px; /* Limit the width */
  margin: 0 auto; /* Center the section */
  background-color: rgba(255, 255, 255, 0.2); /* Transparent background */
  backdrop-filter: blur(10px); /* Glassmorphism effect */
  border-radius: 2px; /* Rounded corners for a softer look */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Shadow for depth */
  flex-wrap: wrap;
}

#contact h2 {
  font-size: 2.5rem;
  color: #333; /* Dark text for readability */
  margin-bottom: 40px; /* Space below the heading */
}

#contact form {
  display: flex; /* Flexbox for layout */
  flex-direction: column; /* Stack inputs vertically */
  gap: 20px; /* Space between inputs */
  max-width: 600px; /* Limit form width */
  margin: 0 auto; /* Center the form */
}

#contact input,
#contact textarea {
  padding: 15px; /* Padding for inputs */
  font-size: 1rem; /* Font size */
  border: 2px solid #4a90e2; /* Border color */
  border-radius: 8px; /* Rounded edges */
  background-color: rgb(246, 250, 251, 0.95); /* Light background */
  width: 100%; /* Full width */
}

#contact textarea {
  height: 150px; /* Height for textarea */
  resize: none; /* Disable resizing */
}

#contact button {
  padding: 15px; /* Button padding */
  background-color: #4a90e2; /* Button background color */
  color: white; /* Text color */
  font-size: 1.2rem; /* Font size */
  border: none; /* Remove default border */
  border-radius: 20px; /* Rounded button */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s ease; /* Smooth transition */
}

#contact button:hover {
  background-color: #357ab7; /* Darker shade on hover */
}

/* Result message styling */
#result {
  margin-top: 20px; /* Space above the result message */
  font-size: 1.2rem; /* Font size for messages */
  color: #333; /* Default text color */
}

.text-white {
  color: white; /* Success message color */
}

.text-red-500 {
  color: red; /* Error message color */
}


/* Hide navigation by default on smaller screens */
@media (max-width: 768px) {
  .hamburger-menu {
    display: flex;
    position:absolute;
    left: 20px;  /* Adjust the value to set the left margin */
    top: 20px;  /* Adjust for vertical positioning */
    font-size: 28px; /* Larger icon size for better touch target */
    z-index: 9999; /* Ensure the hamburger is on top */
  }

  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%; /* Full width for smaller screens */
  }

  .nav-links.active {
    display: flex;
  }
  .sticky-header nav a {
    font-family: "Raleway", sans-serif;
    font-size: 1.1rem;
    
  }
  .sticky-header nav ul {
    display: flex;
    gap: 20px;
    padding: 10px;
  }

  .sticky-header {
    flex-direction: column;
    align-items: flex-start;
    background: linear-gradient(
      to top right,
      rgba(255, 255, 255, 0.9),
      rgb(25, 102, 171, 1)
    ); /* Adjusted for a soft, milky gradient */
    backdrop-filter: blur(5px); /* Optional: adds a blurred effect */
  }
  .use-cases-grid{
    padding: 20px;
  }
  
}

/* Flip Animation for Card */
.use-case-item {
  position: relative;
  width: 100%;
  height: 360px; /* Increased height to avoid clipping */
  perspective: 1200px; /* Increased perspective for a more realistic 3D effect */
  cursor: pointer;
}

/* Border for form input elements */
input,
textarea {
  border: 2px solid #4a90e2; /* Match border with button */
}

/* Partners Section */
.partners-section {
  padding: 80px 20px;
  text-align: center;
}

.partners-section,
.parallax-section,
#partners,
#use-cases.parallax-section,
.news-section,
.tagembed-section {
  background-color: rgba(255, 255, 255, 0.2); /* Transparent background */
  backdrop-filter: blur(10px); /* Adds glassmorphism effect */
  padding: 30px 20px;
}

.partners-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.partner-logo img {
  width: 140px; /* Fixed width for consistency */
  height: 100px; /* Fixed height to match aspect ratio */
  object-fit: contain; /* Ensures logos are scaled without cropping */
  padding: 10px; /* Optional: adds spacing within each image box */
  background-color: #ffffffE6; /* Optional background to unify look */
  border-radius: 8px; /* Rounded corners for a softer look */
}

/* Footer Section */
footer {
  background-color: #ffffffcc; /* Background color for footer */
  color: #333;
  padding: 10px;
  text-align: center;
  border-color: #4f83ba;
  border-radius: 0 0 5px 5px;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .sticky-header {
    padding: 10px 15px; /* Reduced padding */
    flex-direction: column; /* Stack header items vertically */
    align-items: flex-start; /* Align items to the start */
  }
  .hamburger-menu {
    display: flex; /* Show hamburger menu */
    font-size: 28px; /* Larger icon for touch targets */
    margin-left: auto; /* Align to the right */
  }
  .sticky-header nav ul {
    gap: 25px; /* Reduce gap for mobile */
  }
  .nav-links {
    display: none; /* Hide navigation links by default */
    flex-direction: column; /* Stack links vertically */
    width: 100%; /* Full width */
  }
  .nav-links.active {
    display: flex; /* Show navigation when active */
  }

  .hero-section h1 {
    font-size: 2rem; /* Decrease font size for smaller screens */
  }

  .hero-section p {
    font-size: 1rem; /* Decrease font size for smaller screens */
  }
}
@media (max-width: 768px) {
  .hero-section {
    height: auto; /* Allow height to adjust */
    padding: 20px; /* Add padding */
    padding-top: 100px;
  }

  .hero-section h1 {
    font-size: 1.8rem; /* Decrease heading size */
  }

  .hero-section p {
    font-size: 1rem; /* Decrease paragraph size */
    padding: 0 10px; /* Add horizontal padding */
  }
}
@media (max-width: 768px) {
  .use-cases-container {
    padding: 25px; /* Reduce padding */
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Allow smaller cards */
    min-height: auto;
    aspect-ratio: 2.2;
    
    
  }

  .products-services-container{
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Allow smaller cards */
    aspect-ratio: 2.2;
    min-height: auto;
    min-height: 600px;
  }
  .use-case-item,
  .product-service-item {
    max-width: 230px; /* Allow full width for cards */
    min-height: 220px;
    margin: 0 auto;
    padding-right: 20px;
    box-sizing: border-box; /* Prevents overflow caused by padding */

  }

  .use-case-item .card-front img {
    width: 80%;
    height: auto;
  }

  .card-front .img-wrapper {
    width: 85%;
    height: 130px;
  }

  .card-front h3,
  .card-back h3 {
    font-size: 1.2rem; /* Reduce heading size */
  }

  .card-front p,
  .card-back p {
    font-size: 0.7rem; /* Reduce paragraph size */
    
  }
}
@media (max-width: 768px) {
  #contact {
    display: grid; /* Enable flexbox */
    flex-direction: column; /* Stack the content vertically */
    place-items: center; /* Centers both horizontally and vertically */
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    height: auto;
    padding: 60px 20px;
    margin: 0 auto; /* Ensure the section is centered */
    width: 100%; /* Make sure it spans the full width */
    box-sizing: border-box; /* Include padding in element's total width/height */
  }

  #contact h2 {
    font-size: 2rem; /* Decrease heading size */
  }

  #contact form {
    width: 100%; /* Ensure the form takes full width */
    max-width: none; /* Remove any max-width restriction */
  }

  #contact input,
  #contact textarea {
    font-size: 0.9rem; /* Adjust input sizes */
  }

  #contact button {
    font-size: 1rem; /* Adjust button size */
  }
}
@media (max-width: 768px) {
  body {
    font-size: 14px; /* Set a base font size for better readability */
  }

  p {
    line-height: 1.5; /* Improve readability */
  }
}


/* LinkedIn Interactive Container Styling */
.interactive-container {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  padding: 20px;
  margin: 20px auto;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  max-width: 800px;
}

.interactive-container h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
  color: #333;
}

#posts .post {
  background-color: #f7f7f7;
  margin-bottom: 10px;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  font-size: 0.9rem;
}

  
  @media (max-width: 768px) {
    .tagembed-widget {
        height: 300px; /* Adjust height for smaller screens */
        padding: 25px 20px;
    }
}
/* Even smaller screens */
@media (max-width: 375px) {
  .use-case-item,
  .product-service-item {
    min-height: 200px; /* Further reduced height */
    max-width: 220px; /* Further reduced width */
  }

  .card-front .img-wrapper {
    height: 100px;
  }

  .card-front h3,
  .card-back h3 {
    font-size: 1rem;
  }

  .card-front p,
  .card-back p {
    font-size: 0.6rem;
  }
}

/* Optional: Add smooth transitions */
.use-case-item,
.product-service-item,
.card-front,
.card-back {
  transition: all 0.3s ease-in-out;
}

/* Optional: Improve touch interaction */
@media (hover: none) {
  .use-case-item,
  .product-service-item {
    cursor: default;
    -webkit-tap-highlight-color: transparent;
  }
}

/* GDPR Banner Style */
.gdpr-banner {
  position: fixed;
  bottom: 0; /* Can be top: 0 for top positioning */
  width: 100%;
  background-color: #4f83ba; /* Match the website color theme */
  color: #ffffff; /* Text color should contrast */
  padding: 10px 0;
  font-family: "Raleway", sans-serif; /* Keep the font consistent */
  text-align: center;
  z-index: 1000; /* Ensure the banner stays above other content */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional shadow for depth */
}

.gdpr-content {
  max-width: 1200px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.gdpr-banner p {
  font-size: 1rem;
  margin: 0;
}

.gdpr-banner a {
  color: #e1e7fe;
  text-decoration: none;
}

.gdpr-banner a:hover {
  text-decoration: underline;
}

/* Nõusolekunupud: mõlemad valikud visuaalselt võrdsed (GDPR nõue) */
.gdpr-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: center;
}

.accept-button {
  background-color: #1966abcc; /* Consistent button color */
  color: white;
  padding: 8px 16px;
  font-weight: bold;
  font-size: 1rem;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.accept-button:hover {
  background-color: #357ab7;
}

@media (max-width: 600px) {
  .gdpr-content {
    flex-direction: column;
    gap: 10px;
    padding: 6px 16px;
  }
  .gdpr-banner p {
    font-size: 0.85rem;
  }
}

/* Hide banner once accepted */
.gdpr-banner.hidden {
  display: none;
}

/* Folded corner hint — indicates card is clickable/flippable */
.use-case-item:not([data-flip="true"]):hover .card-front,
.product-service-item:not([data-flip="true"]):hover .card-front {
  background-size: 38px 38px;
}
/* Styling for the news section image */
.news-image-container {
  display: flex;
  justify-content: center; /* Center the image */
  margin-top: 20px; /* Add space between the widget and the image */
}

.news-image {
  max-width: 60%; /* Ensure the image is responsive */
  height: auto; /* Maintain aspect ratio */
  border-radius: 10px; /* Optional: Add rounded corners */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add hover effect */
}

.news-image:hover {
  transform: scale(1.05); /* Slight zoom on hover */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .partner-logo img {
    width: 100px;
    height: 70px;
    padding: 6px;
  }

  .news-image-container {
      margin-top: 15px; /* Reduced space on mobile */
  }

  .news-image {
      max-width: 60%; /* Limit width for smaller screens */
      height: auto; /* Maintain aspect ratio */
      margin: 0 auto; /* Center the image */
      border-radius: 8px; /* Slightly smaller rounded corners */
  }
}

@media (max-width: 375px) {
  .news-image {
      max-width: 50%; /* Further limit width for very small screens */
  }
}