/* 1) Import Cairo and IBM Plex Sans from Google */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;400;700&family=IBM+Plex+Sans:ital,wght@0,100;0,400;0,700;1,100;1,400;1,700&display=swap');

/* 2) Self-host the other two */
@font-face {
  font-family: 'Stolzl';
  src: url('/fonts/STOLZL-BOLD.TTF') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Lalezar';
  src: url('/fonts/LALEZAR-REGULAR.TTF') format('truetype');
  font-weight: 400;
  font-display: swap;
}
/* ——— Co Headline ——— */
@font-face {
    font-family: 'Co Headline';
    src: url('/fonts/Co_Headline_Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Co Headline';
    src: url('/fonts/Co_Headline_Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Co Headline';
    src: url('/fonts/Co_Headline_Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  
  /* ——— Co Text ——— */
  @font-face {
    font-family: 'Co Text';
    src: url('/fonts/Co_Text_Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Co Text';
    src: url('/fonts/Co_Text_Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Co Text';
    src: url('/fonts/Co_Text_Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  
  /* ——— CoFo FlicFlac ——— */
  @font-face {
    font-family: 'CoFo FlicFlac';
    src: url('/fonts/CoFo_FlicFlac_Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
  /* ——— CoFo Gothic VF (variable) ——— */
  @font-face {
    font-family: 'CoFo Gothic VF';
    src: url('/fonts/CoFo_Gothic_VF_Regular.otf') format('opentype-variations');
    font-weight: 100 900;     /* variable weight axis */
    font-display: swap;
  }
  
  /* ——— CoFo Peshka VF Black ——— */
  @font-face {
    font-family: 'CoFo Peshka';
    src: url('/fonts/CoFo_Peshka_VF_0_Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }
/* 3) Apply them */
body {
  /* Cairo for body text, fallback to sans-serif */
  font-family: 'IBM Plex Sans', sans-serif;
}

h1, h2, h3, .display-1 {
  /* Lalezar for big headings */
  font-family: 'Lalezar', cursive;
}

strong, b {
  /* IBM Plex Sans for bold or emphasis */
  font-family: 'IBM Plex Sans', sans-serif;
}

.logo, .brand-text {
  /* Stolzl for logos or brand lockups */
  font-family: 'Stolzl', sans-serif;
}
:root {
    --brand-green: #8ee12c;
}
.bg-green{
    background: #8ee12c;
}
.text-black{
    color: #000;
}
/* ensure content isn't hidden under fixed navbar */
body {
    padding-top: 70px;
    /* adjust if your navbar height differs */
}

.navbar-brand img {
    height: 64px;
}

/* Navbar link styles */
.navbar-light .nav-link {
    color: #000;
    margin: 0 0.75rem;
    font-weight: 500;
}

.navbar-light .nav-link.active {
    color: var(--brand-green) !important;
}

/* Contact button: outline & black text */
.btn-contact {
    background: transparent;
    color: #000;
    border: 2px solid #000;
    border-radius: 50px;
    padding: 0.5rem 1.5rem;
    font-weight: bold;
    transition: background .2s, color .2s;
}

.btn-contact:hover {
    background: #000;
    color: #fff;
}

/* Hero section */
.hero {
    background: var(--brand-green);
    color: #fff;
    height: 100vh;
    position: relative;
}

.hero .display-1 {
    line-height: 1.5;
}
.hero .lead {
    max-width: 60%;
    margin: 0 auto;
}
.fw-bold{
    font-weight: 500 !important;
}
@media (min-width: 1200px) {
    .display-1 {
        font-size: 4.5rem;
    }
}
/* Scroll‐down indicator */
.scroll-down {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 3rem;
    height: 3rem;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.scroll-down:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* dark background for the whole block */
.services-section {
    position: relative;
    /* ensure sticky is bounded here */
    background: #000;
}

.services-section .services-title {
    position: sticky;
    top: calc(11% + 7rem);
    /* 56px = navbar height; +1rem gap */
    z-index: 10;
    /* sit above the rows */
    margin-bottom: 3rem;
    /* keep your existing spacing */
    color: #fff;
    font-size: 2.5rem;
    font-weight: 600;
}

/* each service = full viewport height, flex‑centered */
.services-section .service {
    height: 100vh;
    display: flex;
    align-items: center;
}


/* image styling */
.service img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* text styling */
.service-text {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
    line-height: 1.6;
}

.fade-image {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* when in‑view, fade in and slide up */
.fade-image.visible {
    opacity: 1;
    transform: translateY(0);
}

/* base for both images and text */
.fade-image,
.fade-text {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* when in view */
.fade-image.visible,
.fade-text.visible {
    opacity: 1;
    transform: translateY(0);
}

/* .fade-text {

    max-width: 400px;
} */

/* Partners */
.partners-section {
    background: #f8f9f5;
    /* light off‑white */
}

.partners-section .section-title {
    font-size: 2.5rem;
    /* font-weight: 600; */
    color: var(--brand-green);
}

/* CTA */
.cta-section {
    background: #fff;
}

.cta-section .text-brand-green {
    color: var(--brand-green);
}

/* Footer */
.bg-brand-green {
    background:
        url('/images/lt.png') no-repeat top center,
        var(--brand-green);
    /* size the image to taste, and let the green fill the rest */
    background-size:
        auto,
        /* keep your png’s intrinsic size (or use e.g. 100% auto) */
        cover;
    min-height: 300px;
    /* ← adjust to match your PNG height or look */
    display: flex;
    align-items: center;
    /* vertical center */

}

.footer .nav-link {
    font-weight: 500;
}

.footer hr {
    margin: 0 -1rem;
}

.display-5 {
    font-size: 80px;
    font-weight: bold;
}

.cta-section {
    background-color: #f8f9f5;
    background-image: url('/images/target.webp');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    background-position-y: -41px;
}


@media (max-width: 1024px) {
    .display-5 {
        font-size: 35px !important;
    }

    .cta-section {
        background-size: 221px;
        background-position-y: -7px;
    }
}

/* Hero About */
.hero-about {
    background: var(--brand-green);
    min-height: 60vh;
    padding: 4rem 0;
}
.hero-inside{
    background: url("/images/bg.png");
    background-size: cover;
}
/* Marquee */
.services-marquee {
    /* background: #000; */
}

.services-marquee .d-flex>div {
    white-space: nowrap;
    font-weight: 500;
    font-size: 0.9rem;
}

/* Story */
.section-title {
    font-size: 4.5rem;
    /* font-weight: 600; */
}

/* Team slider */
.team-section .team-cards {
    scroll-behavior: smooth;
}

.team-section .team-prev,
.team-section .team-next {
    color: #000;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    /* width: 2.5rem;
    height: 2.5rem; */
}
.text-success{
    color: var(--brand-green) !important;
}
.btn-success{
    background: var(--brand-green);
    color: #fff;
 
}
.team-section .team-prev:hover,
.team-section .team-next:hover {
    background: var(--brand-green);
    color: #fff;
}

.team-section .team-cards::-webkit-scrollbar {
    display: none;
}

/* Utility */
.text-brand-green {
    color: var(--brand-green) !important;
}

.bolder {
    font-weight: bolder;
}

.f32, .m-128{
    margin-bottom: 28px;
    /* max-width: 520px; */
}
.f32{
    font-size: 32px;
    font-weight:700;
}
.m-128{
    margin-top: 128px;
}
.pargraphabout{
    max-width: 500px;

}
.display-4 {
    font-size: 5.5rem;
    font-family: 'Co Headline', sans-serif;
    font-weight: 700; /* you can choose 300, 400 or 700 */
  
}
.display-5 {
    font-size: 8.5rem;
    font-family: 'Co Headline', sans-serif;
    font-weight: 700; /* you can choose 300, 400 or 700 */
  
}
.display-3{
    font-family: 'CoFo Gothic VF', sans-serif;
    font-weight: 100;       /* ← this is the “thin/light” version */
  
}
.display-2{
    font-family: 'CoFo Gothic VF', sans-serif;
    font-weight: 100 !important;       /* ← this is the “thin/light” version */
    font-size: 32px !important;
}
@media (min-width: 1024px) {
    .display-5 {
        font-size: 80px !important;
    }

 
}


.conicon{
    height: 48px;
    width: 48px;
    object-fit: scale-down;
}
.rounded-pill {
    border-radius: 1rem !important;
}
/* $2y$10$hXx6TMw3fdlIpB.9aDsOSOfFxCsoheX1Ex5GEJsGCSD10XLDZOFSS */

@media (max-width: 1024px) {
    .display-5 {
        font-size: 3.5rem !important;
    }
}