/* Ndalama — theme (built on the Ntoka Studios theme: Cabinet Grotesk, black on white) */

@font-face { font-family: "Grotesk-Regular"; src: url('../fonts/CabinetGrotesk-Regular.otf'); font-display: swap; }
@font-face { font-family: "Grotesk-Medium";  src: url('../fonts/CabinetGrotesk-Medium.otf');  font-display: swap; }
@font-face { font-family: "Grotesk-Bold";    src: url('../fonts/CabinetGrotesk-Bold.otf');    font-display: swap; }

html { scroll-behavior: smooth; }
section[id], footer[id] { scroll-margin-top: 20px; }
body { font-family: "Grotesk-Regular", sans-serif; color: #000000; overflow-x: hidden; }

/* ---------- Navigation ---------- */
nav ul li a { font-size: 18px; font-family: "Grotesk-Regular", serif; color: #000000 !important; }
header .nav { align-items: center; }
header .nav-pills .nav-link.active { background: none; }
header .nav-link:hover, header .nav-link.active { text-decoration: underline; text-underline-offset: 6px; }
.navbar-toggler { border: 1px solid #FFFFFF; }

/* ---------- Buttons ---------- */
.btn-ndalama, .btn-ndalama-outline, .btn-ndalama-light {
    display: inline-block;
    font-family: "Grotesk-Medium", serif;
    font-size: 18px;
    padding: 16px 34px;
    border-radius: 0;
    border: 2px solid #000000;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
.btn-ndalama { background: #000000; color: #FFFFFF; }
.btn-ndalama:hover { background: #FFFFFF; color: #000000; }
.btn-ndalama-outline { background: transparent; color: #000000; }
.btn-ndalama-outline:hover { background: #000000; color: #FFFFFF; }
.btn-ndalama-light { background: #FFFFFF; color: #000000; border-color: #FFFFFF; }
.btn-ndalama-light:hover { background: transparent; color: #FFFFFF; }

.tagline { font-family: "Grotesk-Bold", serif !important; }

/* ---------- Hero ---------- */
#hero {
    background: url("../images/hero.jpg") no-repeat center right;
    background-size: cover;
    min-height: 100vh;
    padding-bottom: 80px;
}
#hero.hero-sub { min-height: 80vh; }

#hero h1 {
    font-size: 104px;
    font-family: "Grotesk-Bold", serif;
    color: #000000;
    line-height: 104px;
    margin-top: 30px;
}
#hero h2 {
    font-size: 100px;
    font-family: "Grotesk-Bold", serif;
    color: #000000;
    line-height: 104px;
    margin-top: 30px;
}
#hero h4 { font-family: "Grotesk-Bold", serif; font-size: 40px; color: #616161; margin-top: 20px; }
#hero p { margin-top: 40px; font-size: 24px; font-family: "Grotesk-Regular", serif; color: #0B0A0A; }

.wrapper { display: flex; height: 70px; box-sizing: content-box; margin-top: 16px; }
.words { overflow: hidden; }
.words span {
    font-size: 60px;
    font-family: "Grotesk-Bold", serif;
    color: #616161;
    line-height: 70px;
    display: block;
    height: 100%;
    white-space: nowrap;
    animation: spin_words 12s infinite;
}
@keyframes spin_words {
    0%   { transform: translateY(0%); }
    10%  { transform: translateY(0%); }
    20%  { transform: translateY(-100%); }
    30%  { transform: translateY(-100%); }
    40%  { transform: translateY(-200%); }
    50%  { transform: translateY(-200%); }
    60%  { transform: translateY(-300%); }
    70%  { transform: translateY(-300%); }
    80%  { transform: translateY(-400%); }
    90%  { transform: translateY(-400%); }
    100% { transform: translateY(-500%); }
}
@media (prefers-reduced-motion: reduce) { .words span { animation: none; } html { scroll-behavior: auto; } }

/* ---------- Intro ("about") ---------- */
#about { padding-top: 150px; padding-bottom: 120px; }
#about h2 { font-family: "Grotesk-Bold", serif; font-size: 50px; color: #616161; }
#about h3 { font-family: "Grotesk-Regular", serif; font-size: 64px; }
#about p { font-family: "Grotesk-Regular", serif; font-size: 20px; margin-top: 30px; }
#about img { margin-top: 33px; }

#cover img { width: 100%; height: auto; }
.service-list img, .split img { height: auto; object-fit: cover; background: #ECECEC; }

/* ---------- Dark band ---------- */
#about-section, .dark-band {
    background: linear-gradient(rgba(0, 0, 0, .62), rgba(0, 0, 0, .62)), url("../images/bg-010101.png") no-repeat center #000000;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 100px;
}
#about-section h1, .dark-band h1 { font-family: "Grotesk-Bold", serif; color: white; font-size: 56px; }
#about-section h2, .dark-band h2 { font-family: "Grotesk-Bold", serif; color: #9A9A9A; font-size: 32px; }
#about-section p, .dark-band p { color: white; font-size: 20px; font-family: "Grotesk-Regular", serif; }

.about-section-1 { padding-top: 50px; padding-bottom: 100px; }
.about-section-1 h2 { font-family: "Grotesk-Bold", serif; font-size: 50px; }
.about-section-1 h4 { font-family: "Grotesk-Bold", serif; font-size: 28px; color: #616161; margin-bottom: 24px; }
.about-section-1 p { font-family: "Grotesk-Regular", serif; font-size: 20px; }
.about-section-1 ol li { font-family: "Grotesk-Regular", serif; font-size: 20px; margin-bottom: 8px; }

/* ---------- Split sections ---------- */
#why-choose-us, .split { padding-top: 140px; padding-bottom: 150px; }
#why-choose-us h1, .split h1 { font-family: "Grotesk-Medium", serif; font-size: 72px; line-height: 1.05; }
#why-choose-us h2, .split h2 { font-family: "Grotesk-Bold", serif; font-size: 50px; color: #616161; }
#why-choose-us h3, .split h3 { font-family: "Grotesk-Regular", serif; font-size: 64px; }
#why-choose-us p, .split p { font-family: "Grotesk-Regular", serif; font-size: 24px; width: 90%; }
.split p.body { font-size: 20px; width: 100%; }

/* ---------- Icon grids ---------- */
.industries { font-family: "Grotesk-Regular", serif; font-size: 20px; padding-top: 140px !important; padding-bottom: 60px; }
.industries h2 { font-family: "Grotesk-Bold", serif; font-size: 50px; color: #616161; }
.industries h4 { font-family: "Grotesk-Regular", serif; font-size: 24px; color: #616161; }
.industries h5 { margin-top: 20px; font-family: "Grotesk-Bold", serif; font-size: 22px; }
.industries ul li { font-family: "Grotesk-Regular", serif; font-size: 20px; }
.industries .card-view { padding: 0 20px; }

/* ---------- Card lists (features / business) ---------- */
.service-list { background: #F6F6F6; padding-bottom: 100px; }
.service-list h2 { font-family: "Grotesk-Bold", serif; font-size: 40px; }
.service-list h3 { font-family: "Grotesk-Bold", serif; font-size: 28px; }
.service-list h4 { font-family: "Grotesk-Bold", serif; font-size: 22px; color: #616161; }
.service-list ol li, .service-list p { font-family: "Grotesk-Regular", serif; font-size: 20px; }

/* ---------- Call to action ---------- */
#download { padding-top: 140px; padding-bottom: 60px; text-align: center; }
#download h2 { font-family: "Grotesk-Bold", serif; font-size: 50px; color: #616161; }
#download h3 { font-family: "Grotesk-Regular", serif; font-size: 64px; }
#download p { font-family: "Grotesk-Regular", serif; font-size: 24px; }

/* ---------- Footer ---------- */
footer { background: url("../images/footer-bg.png") no-repeat; background-size: cover; padding-top: 150px; }
footer h2 { margin-bottom: 20px; font-family: "Grotesk-Medium", serif; font-size: 31px; }
footer ul li { font-family: "Grotesk-Regular", serif; font-size: 20px; color: #717171; text-decoration: none; }
footer ul li a { color: #717171; text-decoration: none; }
footer ul li a:hover { color: #000000; text-decoration: underline; }
footer p { font-family: "Grotesk-Regular", serif; font-size: 18px; color: #AD9C94; }

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
    #hero h1, #hero h2 { font-size: 76px; line-height: 80px; }
    .words span { font-size: 44px; line-height: 54px; }
    .wrapper { height: 54px; }
    #about h3, .split h3, #why-choose-us h3, #download h3 { font-size: 48px; }
    #why-choose-us h1, .split h1 { font-size: 56px; }
    header .nav-item.px-5 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    #hero, #hero.hero-sub { min-height: unset; background: none; margin-top: 134px !important; padding-bottom: 40px; }
    #hero h1 { font-size: 50px; line-height: 54px; margin-top: 30px; }
    #hero h2 { font-size: 56px; line-height: 60px; margin-top: 30px; margin-bottom: 30px; }
    #hero h4 { font-size: 28px; }
    #hero p { margin-top: 30px; font-size: 20px; }
    #hero img.hero-img { margin: 30px 0 0 !important; }
    .words span { font-size: 32px; line-height: 44px; }
    .wrapper { height: 44px; margin-bottom: 10px; }

    #about { padding-top: 2px; padding-bottom: 60px; }
    #about .col-12 { text-align: center !important; }
    #about h2 { font-size: 30px; margin-top: 20px; }
    #about h3 { font-size: 33px; margin-top: 20px; }

    #about-section h1, .dark-band h1 { font-size: 38px; }
    #about-section, .dark-band { padding-top: 70px; padding-bottom: 70px; }

    #why-choose-us, .split { padding-top: 77px; padding-bottom: 80px; }
    #why-choose-us h1, .split h1 { font-size: 40px; }
    #why-choose-us h2, .split h2, .industries h2, #download h2, .about-section-1 h2 { font-size: 34px; }
    #why-choose-us h3, .split h3, #download h3 { font-size: 33px; margin-bottom: 30px; }
    #why-choose-us p, .split p { font-size: 20px; width: 100%; }

    .industries { padding-top: 70px !important; padding-bottom: 20px; }
    .service-list h2 { font-size: 32px; }
    .service-list h3 { font-size: 24px; }
    #download { padding-top: 80px; }
    #download p { font-size: 20px; }

    .btn-ndalama, .btn-ndalama-outline, .btn-ndalama-light { display: block; text-align: center; margin-bottom: 14px; }

    .navbar-collapse {
        flex-basis: 100%; flex-grow: 1; background: #ffffff6e; align-items: center;
        padding: 20px; border-radius: 6px; margin-top: 20px; text-align: center;
    }
    .nav-link { font-size: 30px; }
    section[id], footer[id] { scroll-margin-top: 100px; }
    .bg-light { --bs-bg-opacity: 0; background-color: white !important; }

    footer { margin-bottom: 50px; background: none; padding-top: 80px; }
    footer h2 { margin-top: 40px; }
    footer img { margin-top: 10px; text-align: center !important; }
}