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

:root {
  /* Brand blues */
  --c-title: #308dc4; /* Content Titles + Section Titles */
  --c-client-title: #2a88b5; /* Our client Titles */
  --card-bg: #f6f6f8; /* Grayed Cards */

  /* Your palette (from the other image you sent earlier) */
  --c-sky-100: #9be3f9;
  --c-sky-200: #5ec3ea;
  --c-blue-500: #48a0f6;
  --c-blue-800: #1b71a3;

  /* Text */
  --text: #000000; /* headings in that design look basically black */
  --text-muted: #505355; /* body text looks like a dark gray (approx) */

  --bg: #ffffff; /* white background */

  /* Typography */
  --font-main: "Nexa", system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
}

/* Nexa font family (OTF) */
@font-face {
  font-family: "Nexa";
  src: url("../fonts/NexaLight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nexa";
  src: url("../fonts/NexaRegular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: "Nexa";
    src: url("../fonts/NexaBook.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Nexa";
    src: url("../fonts/NexaBookItalic.otf") format("opentype");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
  font-family: "Nexa";
  src: url("../fonts/NexaBold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nexa";
  src: url("../fonts/NexaXBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nexa";
  src: url("../fonts/NexaBlack.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: var(--font-main);
  margin: 0;
  padding: 0;
  padding-top: 90px; /* Space for fixed navbar */
  background: var(--bg);
  color: var(--text);
}

html {
  scroll-padding-top: 100px; /* Offset for anchor links with fixed navbar */
}

/* reusable single line */
.sectionLine {
  width: 100%;
  height: 2px;
  background: #000;
  opacity: 0.12;
  display: flex;
  align-items: center; /* centers the line vertically */
}

/* the actual line */
.sectionLine::before {
  content: "";
  width: 100%;
  height: 2px;
  background: #000;
  opacity: 0.12;
  display: block;
}

.primary-button {
  background-color: var(--c-blue-500);
  color: var(--bg);
  border: none;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
}
.primary-accent-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg, #4193bd 0%, #80cbe7 100%);
  color: var(--bg);
  border: none;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  box-shadow: 0 10px 20px rgba(27, 113, 163, 0.25);
}

#bookDemo img,
#bookDemoFooter img{
  width: 1.65rem;
}

#sendresume{
    padding: .5rem 2rem !important;
}

#sendresume img {
    width: 2rem;
    transform: rotate(45deg);
}

.footerLinks {
  width: max-content;
}

main.page-main {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sectionHeader2col {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
  padding: 0 4vw 0rem 4vw;
  border-top: 1px solid #19638e25;
  border-bottom: 1px solid #19638e25;
  width: 100%;
  align-self: stretch;
  box-sizing: border-box;
  padding: 2.5rem 8vw;
}

/* left block: bar + title */
.sectionHeaderLeft {
  display: flex;
  align-items: flex-start;
  gap: 18px; /* matches .clientsTitle gap vibe */
}

.f-aligned-items-center {
  display: flex;
  align-items: center;
}

/* IMPORTANT: your .titleBar is already styled in .clientsHeader;
   this makes sure it still works here too */
.titleBar {
  width: 10px;
  height: 90px;
  background: var(--c-blue-500);
  flex: 0 0 auto;
}

/* title */
.sectionHeaderTitle {
  margin: 0;
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
  line-height: 0.95;
  color: var(--text);
  font-weight: 800;
}

/* blue word */
.blueTitle {
  color: var(--c-blue-800);
}

/* subtitle on the right */
.sectionHeaderSubtitle {
  margin: 0;
  max-width: 30%; /* gives line breaks like your image */
  color: var(--text-muted);
  font-size: 1.2rem;
}

/* responsive stack */
@media (max-width: 900px) {
    .sectionHeader2col{
        flex-direction: row;
        align-items: start;
        padding: .75rem 1rem !important;
    }
    .sectionHeaderSubtitle{
        max-width: 100%;
        display: none;
    }
    .sectionHeaderLeft{
        margin-left: 2rem;
        align-items: center;
    }
}

@media (max-width: 450px) {
    .solutionsHeadline{
    font-size: 2rem !important;
    }
    .heroTitle h3{
        font-size: 1.3rem !important;
        width: 60% !important;
    }
    .sectionHeaderTitle{
        font-size: 1.9rem !important;
    }
    .titleBar{
        height: 70px !important;
    }
}

blue-title{
    color: #1b71a3 !important;
}

/* ===================================================== */
/* Responsive breakpoints                               */
/* ===================================================== */

/* @media (max-width: 1400px) {
    .homeHero {
        align-items: flex-start;
    }
    .sectionTitle.leftTitle {
        width: 65%;
    }
    .clientsDetail {
        width: 75%;
    }
    .clientTextBlock {
        width: 90%;
    }
    .clientsGraphic {
        width: 35%;
        background-size: contain;
    }
    .aboutHero .heroTitle h2 {
        font-size: 2.5rem;
    }
    .featuresList {
        padding: 2.5rem 2.5rem 3rem 3rem;
    }
}

@media (max-width: 1200px) {
    #navbar {
        width: 95%;
    }
    .linksNavbar {
        width: 40%;
    }
    .whyColosoCardsContainer {
        flex-wrap: wrap;
        gap: 2rem;
    }
    .whyColosoCard,
    .whyColosoCard:first-of-type,
    .whyColosoCard:last-of-type {
        width: 100%;
        height: auto;
    }
    .featuresSolutions {
        flex-direction: column;
        height: auto;
        
    }
    .featuresList,
    .featuresGraphic {
        width: 100%;
    }
    .featuresGraphic img {
        max-width: 480px;
        margin: 0 auto;
        display: block;
    }
    .howItWorksSolutionsGraphic,
    .howItWorksSolutionsSteps {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    #navbar {
        flex-wrap: wrap;
        gap: 1rem;
    }
    .logoNavbar,
    .linksNavbar,
    .supportButtonsNavbar {
        width: auto;
    }
    .howItWorksSolutionsGraphic {
        width: 60%;
        margin: 0 auto 2rem auto;
    }
    .howItWorksSolutionsGraphic img {
        transform: none;
        width: 100%;
    }
    .howItWorksSolutionsContainer {
        flex-direction: column;
        gap: 2rem;
    }
    .howItWorksSolutionsSteps {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .hiwStep {
        width: 100%;
    }
    .career-descriptions {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .careersSection {
        padding: 3rem 0;
    }
    .foundersTeam {
        grid-template-columns: repeat(2, 1fr);
    }
    .developmentTeam {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .content.contact-grid {
        grid-template-columns: 1fr;
    }
    .form-row.two {
        flex-direction: column;
    }
    .footerInfo {
        flex-direction: column;
        gap: 2rem;
        align-items: center;
        text-align: center;
    }
    .footer-c,
    .footer-r,
    .footer-buttons {
        width: 100%;
        align-items: center;
    }
    .footerLinks ul {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    #navbar {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
    }
    .logoNavbar,
    .linksNavbar,
    .supportButtonsNavbar {
        width: 100%;
        justify-content: flex-start;
    }
    #navbar ul {
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: flex-start;
    }
    .sectionTitle.rightTitle,
    .sectionTitle.leftTitle,
    .sectionTitle.centerTitle {
        width: 100%;
        text-align: left;
        align-items: flex-start;
    }
    .sectionTitle.centerTitle p {
        text-align: left;
    }
    .whyColosoCardsContainer {
        flex-direction: column;
    }
    .heroGraphics {
        flex-direction: column;
        gap: 1.5rem;
    }
    .heroGifContainer,
    .heroGifContainer:nth-of-type(2) {
        width: 80%;
        transform: none;
        animation: none;
    }
    .featuresList {
        border-radius: 2rem;
        padding: 2rem;
    }
    .featuresList ul {
        margin-left: 0;
    }
    .aboutValuesContainer {
        grid-template-columns: 1fr;
    }
    .expertiseContainer {
        flex-direction: column;
        gap: 2rem;
    }
    .verticalHR {
        display: none;
    }
    .career-desc {
        padding: 1.5rem 1rem;
    }
    .teamContainer {
        padding: 1rem 0;
    }
}

@media (max-width: 600px) {
    .homeHero .sectionTitle {
        position: relative;
        width: 100%;
        margin-left: 0;
    }
    .featuresList {
        padding: 1.75rem;
    }
    .howItWorksSolutionsGraphic {
        width: 100%;
    }
    .content.contact-grid,
    main.page-main {
        padding: 0 1rem;
    }
    .foundersTeam,
    .developmentTeam {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .contact-wrap {
        margin-top: 6rem;
    }
}

@media (max-width: 480px) {
    #navbar {
        padding: 0.75rem 1rem;
    }
    .logoNavbar img {
        width: 45%;
    }
    .featuresList {
        border-radius: 1.5rem;
    }
    .clientsDetail {
        height: auto;
    }
    .contact-map iframe.gmap-frame {
        height: 220px;
    }
    main.page-main {
        padding: 2rem 0;
    }
}


@media (max-width: 768px) {
  .aboutHero {
    height: auto;              
    align-items: flex-start;   
  }

  .aboutHero .heroTitle {
    width: 100%;               
    align-items: flex-start;
  }

  .aboutHero .heroTitle h2 {
    width: 100%;               
    font-size: 2.2rem;         
  }

  .aboutHero .heroTitle p {
    width: 100%;
    font-size: 1rem;           
  }
}

@media (max-width: 950px){
  .clientsHeader{
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
  }

  .clientSectionContainer{
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .clientsRadarPlaceholder{
    width: min(420px, 95%);
  }

  .clientsDetail::before{
    inset: -10% -20% -10% -20%;
    background-position: top center;
    opacity: 0.35;
  }

  .clientText{
    grid-template-columns: 50px 1fr;
  }
}
 */