/*@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');*/

@import url("sections/header.css");
@import url("sections/companies.css");
@import url("sections/powerhouse.css");
@import url("sections/services.css");
@import url("sections/success-stories.css");
@import url("sections/contact.css");
@import url("sections/footer.css");

/* Replace the Google Fonts import at the top of styles.css with this */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Work Sans'), local('WorkSans-Regular'),
       url('https://fonts.gstatic.com/s/worksans/v18/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K0nXBiEJpp_c.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Add fallback font families */
:root {
  --work-sans: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --work-sans-regular: 400 1rem var(--work-sans);
  --work-sans-black-italic: italic 900 1rem var(--work-sans);
  --work-sans-bold: 700 1rem var(--work-sans);
  --work-sans-bold-italic: italic 700 1rem var(--work-sans);
  --work-sans-light: 300 1rem var(--work-sans);
  --work-sans-light-italic: italic 300 1rem var(--work-sans);
  --work-sans-extra-light-italic: italic 200 1rem var(--work-sans);
}

/* Add these media queries to the end of your styles.css file */

/* Tablets and smaller desktops */
@media screen and (max-width: 1024px) {
  /* Header adjustments */
  .header__logo img {
    max-width: 40%;
  }

  .header__hero h1 {
    font-size: 3.5rem;
  }

  .header__hero h4 {
    font-size: 1.5rem;
  }

  /* Services section */
  .main__services-container {
    padding-inline: 50px;
    width: 90%;
  }

  /* Success stories */
  .main__success-stories-cards {
    width: 90%;
  }
}

/* Mobile devices */
@media screen and (max-width: 768px) {
  /* Header */
  header {
    padding-bottom: 50px;
    background-position: -500px -300px;
  }

  .header__logo {
    padding-bottom: 30px;
  }

  .header__logo img {
    max-width: 60%;
  }

  .header__hero h1 {
    font-size: 2.5rem;
  }

  .header__hero h4 {
    font-size: 1.2rem;
  }

  .header__menu {
    flex-direction: column;
    gap: 1rem;
  }

  /* Company logos */
  .main__companies-logos {
    flex-direction: column;
    align-items: center;
  }

  .main__companies-logos img {
    max-width: 70% !important;
    height: auto;
  }

  /* Powerhouse section */
  #main__powerhouse {
    padding-top: 50px;
  }

  .main__powerhouse-blurb {
    font-size: 2rem;
  }

  /* Services section */
  #main__services {
    padding-top: 50px;
    flex-direction: column;
  }

  .main__services-container {
    padding: 20px;
    gap: 120px;
    width: 100%;
  }

  .main__services-rnd::before,
  .main__services-optimization::before,
  .main__services-consulting::before {
    transform: scale(0.7);
  }

  /* Success stories */
  .main__success-stories-cards {
    width: 100%;
  }

  .main__card-picknik-content,
  .main__card-new-horizon-content,
  .main__card-nerospec-content,
  .main__card-standard-bots-content {
    padding-top: 70px;
    width: 90%;
  }

  .main__card-picknik-content::after,
  .main__card-new-horizon-content::after,
  .main__card-nerospec-content::after,
  .main__card-standard-bots-content::after {
    display: none; /* Hide background graphics on mobile */
  }

  .main__card-logo-picknik,
  .main__card-logo-new-horizon,
  .main__card-logo-nerospec,
  .main__card-logo-standard-bots {
    width: 70%;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
  }

  .main__success-stories-quote {
    width: 100% !important;
    font-size: 1rem;
  }

  /* Contact section */
  #main__contact h1 {
    font-size: 2.5rem;
  }

  #main__contact h2 {
    font-size: 1.2rem;
  }
}

/* Small mobile devices */
@media screen and (max-width: 480px) {
  .header__hero h1 {
    font-size: 2rem;
  }

  #main__services h1 {
    font-size: 2.5rem;
  }

  .main__success-stories-quote-bold,
  .main__success-stories-quote {
    font-size: 1rem;
  }

  .footer__posidonia-logo {
    max-width: 40%;
  }
}

/* General styles */
:root {
  --work-sans: "Work Sans", sans-serif;
  --work-sans-regular: 400 1rem "Work Sans", sans-serif;
  --work-sans-black-italic: italic 900 1rem "Work Sans", sans-serif;
  --work-sans-bold: 700 1rem "Work Sans", sans-serif;
  --work-sans-bold-italic: italic 700 1rem "Work Sans", sans-serif;
  --work-sans-light: 300 1rem "Work Sans", sans-serif;
  --work-sans-light-italic: italic 300 1rem "Work Sans", sans-serif;
  --work-sans-extra-light-italic: italic 200 1rem "Work Sans", sans-serif;

  --color-white: #ffffff;
  --color-secondary: #9ad7d9;
  --color-tertiary: #f7b246;
  --color-text-black: #293636;
  --color-text-blacker: #191919;
  --color-button-inactive: #ddeaeb;
  --color-button-active: #55bdc1;
}

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


body {
    background-color: var(--color-secondary);
    font-family: var(--work-sans);
    text-align: center;
    overflow-x: hidden;
    overflow-y: visible;
}

/* Font loading - put this at the top of styles.css */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 300;
  font-display: fallback;
  src: local('Work Sans Light'), local('WorkSans-Light'),
       url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300&display=swap');
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: local('Work Sans'), local('WorkSans-Regular'),
       url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400&display=swap');
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
  src: local('Work Sans Bold'), local('WorkSans-Bold'),
       url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@700&display=swap');
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 900;
  font-display: fallback;
  src: local('Work Sans Black'), local('WorkSans-Black'),
       url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@900&display=swap');
}


@media screen and (max-width: 768px) {
  /* Add these text fixes */

  /* Fix keywords overflow */
  .main__powerhouse-keywords {
    font-size: 0.8rem;
    white-space: normal !important;
    word-wrap: break-word;
    line-height: 1.5;
    padding: 0 15px;
  }

  /* Fix quote text overflow */
  .main__success-stories-quote,
  .main__success-stories-quote-bold {
    width: 100% !important;
    text-align: center !important;
    font-size: 1rem;
    line-height: 1.4;
    padding: 0 20px;
  }

  /* Fix company cards */
  .main__card-picknik-content,
  .main__card-new-horizon-content,
  .main__card-nerospec-content,
  .main__card-standard-bots-content {
    width: 100%;
    align-self: center !important;
    padding: 80px 10px 20px 10px;
    margin-bottom: 30px;
  }

  /* Logo positioning */
  .main__card-logo-picknik,
  .main__card-logo-new-horizon,
  .main__card-logo-nerospec,
  .main__card-logo-standard-bots {
    position: relative;
    top: -60px;
    left: auto;
    right: auto;
    margin: 0 auto 10px auto;
    width: 200px;
    max-width: 80%;
  }

  /* Text alignment */
  .main__card-picknik-content h2,
  .main__card-new-horizon-content h2,
  .main__card-nerospec-content h2,
  .main__card-standard-bots-content h2 {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
  }

  .main__success-stories-quote-author {
    text-align: center !important;
    padding-top: 10px;
  }

  /* Email button text wrapping */
  .main__contact-email-button h2 {
    word-break: break-all;
    font-size: 1rem;
    padding: 0 5px;
  }
}

@media screen and (max-width: 768px) {
  /* Improve text readability and prevent overflow */
  body {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    width: 100%;
  }

  /* Break long words and URLs */
  * {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
  }

  /* Powerhouse keywords fix */
  .main__powerhouse-keywords-container {
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
  }

  .main__powerhouse-keywords {
    white-space: normal !important;
    font-size: 0.8rem !important;
    text-align: center;
    line-height: 1.6;
  }

  /* Success stories card content */
  .main__card-picknik-content,
  .main__card-new-horizon-content,
  .main__card-nerospec-content,
  .main__card-standard-bots-content {
    box-sizing: border-box;
    padding: 80px 15px 15px 15px !important;
    width: 100% !important;
  }

  /* Quote paragraphs */
  .main__success-stories-quote,
  .main__success-stories-quote-bold {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    box-sizing: border-box;
    padding: 0 15px;
  }

  /* Contact email */
  .main__contact-email-button {
    max-width: 90%;
    padding: 10px 15px;
  }

  .main__contact-email-button h2 {
    font-size: 1rem;
    word-break: break-all;
  }

  .main__inovativni-link {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .main__inovativni-link:hover {
    color: #004999;
    text-decoration: underline;
  }
}